Vue-router动画

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/...