Vue 路由 過渡動效 數據獲取

過渡動效

<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'
  }
}

數據獲取

進入某個路由後，須要從服務器獲取數據。例如，在渲染用戶信息時，你須要從服務器獲取用戶的數據。咱們能夠經過兩種方式來實現：

1.導航完成以後獲取：先完成導航，而後在接下來的組件生命週期鉤子中獲取數據。在數據獲取期間顯示『加載中』之類的指示。

2.導航完成以前獲取：導航完成前，在路由的 enter 鉤子中獲取數據，在數據獲取成功後執行導航。

導航完成後獲取數據

當你使用這種方式時，咱們會立刻導航和渲染組件，而後在組件的 created 鉤子中獲取數據。這讓咱們有機會在數據獲取期間展現一個 loading 狀態，還能夠在不一樣視圖間展現不一樣的 loading 狀態。

假設咱們有一個 Post 組件，須要基於 $route.params.id 獲取文章數據：

在導航完成前獲取數據

經過這種方式，咱們在導航轉入新的路由前獲取數據。咱們能夠在接下來的組件的 beforeRouteEnter 鉤子中獲取數據，當數據獲取成功後只調用 next 方法。

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