Vue | 路由守衛面試常考

前言

最近在整理基礎，歡迎掘友們一起交流學習
結尾有彩蛋哦！ 🎉🎉🎉

Vue Router 路由守衛

導圖目錄

• 1. 路由守衛分類
• 2. 全局路由守衛
• 3. 單個路由守衛
• 4. 組件路由守衛
• 5. 路由守衛執行的完整過程

---

路由守衛分類

• 全局路由
• 單個路由獨享
• 組件內部路由

每個路由守衛的鈎子函數都有 3 個參數：

to : 進入的目標路由

from : 離開的路由

next : 控制路由 在跳轉時進行的操作，一定要執行。

它有 4 個行為：

next() : 鈎子都執行完了，進入到下一個路由當中。

next(false): 中斷路由進入下一個路由。

next('/') : 根據你路由跳轉判斷條件來進入對應的路由， / 為路由的 path 。

next(new Error) : 中斷路由跳轉，錯誤會被傳遞給 router.onError() 注冊過的回調。

全局路由守衛

• beforeEach（to，from， next）
• beforeResolve（to，from， next）
• afterEach（to，from）

全局路由直接掛載到 router 實例上。

//全局驗證路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

// 白名單， 不需要驗證的路由
const whiteList = ['/','/register']

router.beforeEach((to,from,next)=>{
  if(whiteList.indexOf(to.path) === 0) {
    // 放行，進入下一個路由
    next()
  } else if(!(sessionStorage.getItem('token'))){
    next('/');     
  } else {
    next()
  }  
})

beforeEach

使用場景

路由跳轉前觸發

作用

常用於登錄驗證

beforeResolve

使用場景

在 beforeEach 和 組件內beforeRouteEnter 之后，afterEach之前調用。

afterEach

使用場景

1. 發生在beforeEach和beforeResolve之后，beforeRouteEnter之前。
2. 路由在觸發后執行

單個路由獨享

它只有一個 鈎子函數， beforeEnter（to,from,next）

beforeEnter

使用場景

在beforeEach之后執行，和它功能一樣 ，不怎么常用

      {
        path:'/superior',
        component: Superior,
        meta:{
          icon:'el-icon-s-check',
          title:'上級文件'
        },
        beforeEnter:(to,form,next) =>{
          
        }
      }

組件路由守衛

特點：

組件內執行的鈎子函數

鈎子函數：

• beforeRouteEnter(to,from,next)
• beforeRouteUpdate(to,from,next)
• beforeRouteLeave(to,from,next)

beforeRouteEnter

使用場景：

1. 路由進入之前調用。
2. 不能獲取組件 this 實例 ，因為路由在進入組件之前，組件實例還沒有被創建。

執行順序

beforeEach 和獨享守衛 beforeEnter之后，全局 beforeResolve和全局afterEach之前調用.

beforeRouteUpdate

使用場景：

1. 在當前路由改變時，並且該組件被復用時調用，可以通過this訪問實例。
2. 當前路由query變更時，該守衛會被調用。

beforeRouteLeave

使用場景：

導航離開該組件的對應路由時調用，可以訪問組件實例this

路由守衛執行的完整過程

1. 導航被觸發
2. 執行 組件內部路由守衛： beforeRouteLeave
3. 執行 全局路由守衛 beforeEach
4. 在重用組件內部路由守衛鈎子 beforeRouteUpdate
5. 執行 路由中的鈎子 beforeEnter
6. 在被激活的組件里調用 beforeRouteEnter
7. 執行 全局的 beforeResolve 守衛 。
8. 執行 全局的 afterEach 鈎子
9. beforeCreate
10. created
11. beforeMount
12. mounted
13. 執行 beforeRouteEnter的next的回調 ，創建好的組件實例會作為回調函數的參數傳入。

結語

❤️關注+點贊+收藏+評論+轉發❤️，原創不易，鼓勵筆者創作更好的文章

關注公眾號 “前端自學社區”，即可獲取更多前端高質量文章！

關注后回復關鍵詞“加群”， 即可加入 “前端自學交流群”，共同學習進步。

關注后添加我微信拉你進技術交流群

歡迎關注公眾號，更多精彩文章只在公眾號推送