Vue 路由 過渡動效 資料獲取方法
摘要：
過渡動效
<router-view> 是基本的動態元件，所以我們可以用 <transition> 元件給它新增一些過渡效果：
<transition>
<router-view></router-view>
&l...
過渡動效
<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('/').length
const fromDepth = from.path.split('/').length
this.transitionName = toDepth < fromDepth ? 'slide-right' : 'slide-left'
}
}
//前端全棧學習交流圈：866109386
//面向1-3經驗年前端開發人員
//幫助突破技術瓶頸，提升思維能力
資料獲取
進入某個路由後，需要從伺服器獲取資料。例如，在渲染使用者資訊時，你需要從伺服器獲取使用者的資料。我們可以通過兩種方式來實現：
1.導航完成之後獲取：先完成導航，然後在接下來的元件生命週期鉤子中獲取資料。在資料獲取期間顯示『載入中』之類的指示。
2.導航完成之前獲取：導航完成前，在路由的 enter 鉤子中獲取資料，在資料獲取成功後執行導航。
導航完成後獲取資料
當你使用這種方式時，我們會馬上導航和渲染元件，然後在元件的 created 鉤子中獲取資料。這讓我們有機會在資料獲取期間展示一個 loading 狀態，還可以在不同檢視間展示不同的 loading 狀態。
假設我們有一個 Post 元件，需要基於 $route.params.id 獲取文章資料：
在導航完成前獲取資料
通過這種方式，我們在導航轉入新的路由前獲取資料。我們可以在接下來的元件的 beforeRouteEnter 鉤子中獲取資料，當資料獲取成功後只調用 next 方法。