Vue-router动画

2017-09-13 10:30:41来源:segmentfault作者:黄黄黄人点击

分享
vue-router

过渡动效
组件也有动画切换效果
<router-view> 是基本的动态组件,所以我们可以用 <transition> 组件给它添加一些过渡效果:


<transition>
<router-view></router-view>
</transition>
单个路由的过渡

给每个添加特效在组件中加上<transition> 中可以用那么命名
mode="out-in"//设置先出还是先进


基于路由的动态过渡

还可以基于当前路由与目标路由的变化关系,动态设置过渡效果:
用watch进行监听


watch: {
'$route' (to, from) {
const toDepth = to.path.split('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
数据获取
导航完成之后获取

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

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

附上两种数据获取小例

https://github.com/hxj886600/...
https://github.com/hxj886600/...

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台