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