过渡动效

<router-view> 是基本的动态组件，所以我们可以用 <transition> 组件给它添加一些过渡效果：

<transition><router-view></router-view>
</transition>

单个路由的过渡

上面的用法会给所有路由设置一样的过渡效果，如果你想让每个路由组件有各自的过渡效果，可以在各路由组件内使用 <transition> 并设置不同的 name。

基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系，动态设置过渡效果

<!-- 使用动态的 transition name -->
<transition :name="transitionName"><router-view></router-view>
</transition>
// 接着在父组件内
// watch $route 决定使用哪种过渡
watch: {'$route' (to, from) {const toDepth = to.path.split('/').lengthconst fromDepth = from.path.split('/').lengththis.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'}
}

数据获取

进入某个路由后，需要从服务器获取数据。例如，在渲染用户信息时，你需要从服务器获取用户的数据。我们可以通过两种方式来实现：

1.导航完成之后获取：先完成导航，然后在接下来的组件生命周期钩子中获取数据。在数据获取期间显示『加载中』之类的指示。

2.导航完成之前获取：导航完成前，在路由的 enter 钩子中获取数据，在数据获取成功后执行导航。

导航完成后获取数据

当你使用这种方式时，我们会马上导航和渲染组件，然后在组件的 created 钩子中获取数据。这让我们有机会在数据获取期间展示一个 loading 状态，还可以在不同视图间展示不同的 loading 状态。

假设我们有一个 Post 组件，需要基于 $route.params.id 获取文章数据：

在导航完成前获取数据

通过这种方式，我们在导航转入新的路由前获取数据。我们可以在接下来的组件的 beforeRouteEnter 钩子中获取数据，当数据获取成功后只调用 next 方法。

下面是地址：https://github.com/haxxk/xu_s...
https://github.com/haxxk/xu_s...

Vue 路由过渡动效数据获取相关推荐

路由的导航守卫过渡动效transtion导航守卫路由懒加载路由元信息 @stage3---wee2--day7
# 路由的导航守卫别名: 导航守卫路由守卫路由钩子路由拦截作用: - 类似 [保安] 守卫路由进举例: 携带数据进出举例: 事情完成才能出导航守卫一共有三种形式 [ 项目三选一 ] ...
vue实现一个动效柱状图
接手了一个需求的时候,其中有个 UI图是这样的: 按照 PM本来的意思,这张图中只有那几个数字是从接口获取的,而且从接口获取到的每项数字的值,与目前标注的数字相差不会超过 10%,所以柱状图的条形高度 ...
redirect路由配置 vue_Web前端：Vue路由进阶配置
大家好,我来了,本期为大家带来的前端开发知识是"Web前端:Vue路由进阶配置",有兴趣做前端的朋友,和我一起来看看吧! 1. 页面打开权限流程页面是否能打开有以下两点判断: 1 ...
行业思考 | 酷炫动效是否利于你的产品设计？
本文为PMCAFF专栏作者南可出品前言写这篇文章的起因是前段时间在Meidum上读到的一篇驳斥dribbble发展现状的文章.文章发表在16年,其中提到:"我不认为dribbble解决了 ...
APP动效之美需内外兼修（转载自伯乐在线）
APP动效之美需内外兼修 2014/08/06 | 分类: 设计 | 0 条评论 | 标签: 交换设计分享到: 12 原文出处: 百度MUX 欢迎分享原创到伯乐头条移动互联网时代已经到来,AP ...
Vue+Echarts构建可视化大数据平台实战项目（上）粒子动效，登录界面抖动，背景图轮播★
Vue+Echarts构建可视化大数据平台实战项目(上) 前言分享之前我们先来普及一下什么是数据可视化?数据可视化可以把数据从冰冷的数字转换成图形,揭示蕴含在数据中的规律和道理.数据可视化通俗来说就 ...
vue动效：放大缩小与上下移动
vue动效:放大缩小与上下移动标题: Vue动效技巧:流畅放大缩小与优雅上下移动在现代Web开发中,Vue.js已经成为了最受欢迎的JavaScript框架之一.它的简洁性和灵活性使得开发人员能够 ...
vue工程全局设置ajax的等待动效
最近在做vue的项目,使用了element-ui作为ui组件库,采用vuex进行状态管理,与后台的请求交互采用axios库实现,原本做的页面,ajax请求个数也只有三个,将等待动画的显示和隐藏通过mu ...
div旋转 vue_详细解析：uniapp项目|vue组件形式实现的水珠晃动loading纯CSS动效
前言上一篇文件给大家分享了一个颇具科技感的loading动效,[→传送门]这篇文章,小凡再来跟大家分享一个很酷的水珠晃动loading动效,依然是纯CSS实现的哦! 一.效果展示及思路分析 1.效果 ...

Vue 路由过渡动效数据获取

过渡动效

单个路由的过渡

基于路由的动态过渡

数据获取

导航完成后获取数据

在导航完成前获取数据

Vue 路由过渡动效数据获取相关推荐

最新文章

热门文章

Vue 路由 过渡动效 数据获取

过渡动效

单个路由的过渡

基于路由的动态过渡

数据获取

导航完成后获取数据

在导航完成前获取数据

Vue 路由 过渡动效 数据获取相关推荐

最新文章

热门文章

Vue 路由过渡动效数据获取

Vue 路由过渡动效数据获取相关推荐