Vue | 路由守衛面試常考

小阿鑫發表於2021-07-14
Vue路由面試

前言

最近在整理基礎，歡迎部落格園的朋友們一起交流學習
結尾有彩蛋哦！ ???

Vue Router 路由守衛

導圖目錄

    1. 路由守衛分類
    1. 全域性路由守衛
    1. 單個路由守衛
    1. 元件路由守衛
    1. 路由守衛執行的完整過程

路由守衛分類

  • 全域性路由
  • 單個路由獨享
  • 元件內部路由

每個路由守衛的鉤子函式都有 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的回撥 ，建立好的元件例項會作為回撥函式的引數傳入。

Vue 路 由 守 衛 前端自學社群.png

最後

文中如有錯誤，歡迎碼友在評論區指正，如果對你有所幫助，歡迎點贊和關注~~~

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

相關文章