vue-router中vue生命周期的順序

1. vue-router 在 Vue 中的生命周期：

這是 vue 生命周期的圖：

在路由中分別定義A頁面和B頁面

A頁面:

<template>
  <div>
    <router-link to="/test2">去B頁面</router-link>
  </div>
</template>

<script>
  export default {
    beforeCreate(){
      console.log('A頁面 beforeCreate');
    },
    created(){
      console.log('A頁面 created');
    },
    mounted(){
      console.log('A頁面 mounted');
    },
    beforeDestroy(){
      console.log('A頁面 beforeDestroy');
    },
    destroyed(){
      console.log('A頁面 destroyed');
    }
  }
</script>

B頁面：

<template>
  <div>
    <router-link to="/test1">去A頁面</router-link>
  </div>
</template>

<script>
  export default {
    beforeCreate(){
      console.log('B頁面 beforeCreate');
    },
    created(){
      console.log('B頁面 created');
    },
    mounted(){
      console.log('B頁面 mounted');
    },
    beforeDestroy(){
      console.log('B頁面 beforeDestroy');
    },
    destroyed(){
      console.log('B頁面 destroyed');
    }
  }
</script>

從 A 頁面跳到 B 頁面：

2. Vue-Router中，導航守衛的執行順序：

 這里存在疑惑的是組件的生命周期到底在導航守衛的哪個階段執行，測試代碼如下：

結論：從控制台結果可以看出，組件的生命周期是在Vue-Router導航守衛的DOM更新過程中執行的

1. 導航被觸發。
2. 在失活的組件里調用離開守衛。
3. 調用全局的 beforeEach 守衛。
4. 在重用的組件里調用 beforeRouteUpdate 守衛 (2.2+)。
5. 在路由配置里調用 beforeEnter。
6. 解析異步路由組件。
7. 在被激活的組件里調用 beforeRouteEnter。
8. 調用全局的 beforeResolve 守衛 (2.5+)。
9. 導航被確認。
10. 調用全局的 afterEach 鈎子。
11. 觸發 DOM 更新。（此過程觸發組件的生命周期）
12. 用創建好的實例調用 beforeRouteEnter 守衛中傳給 next 的回調函數。

 這也就解釋了切換路由時，兩個組件生命周期執行的順序是交叉的。