Vue Router 守衛

InfoQ 2022-07-23 21:00:23 阅读数:795

vuerouter

導圖目錄

  • 路由守衛分類
  • 全局路由守衛
  • 單個路由守衛
  • 組件路由守衛
  • 路由守衛執行的完整過程


路由守衛分類

  • 全局路由
  • 單個路由獨享
  • 組件內部路由
每個路由守衛的鉤子函數都有 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
使用場景
  • 發生在beforeEach和beforeResolve之後,beforeRouteEnter之前。
  • 路由在觸發後執行

單個路由獨享

它只有一個 鉤子函數, 
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
使用場景:
  • 路由進入之前調用。
  • 不能獲取組件 
     this
     實例 ,因為路由在進入組件之前,組件實例還沒有被創建。
執行順序
 beforeEach
 和獨享守衛
 beforeEnter
之後,全局
 beforeResolve
和全局
afterEach
之前調用.
 beforeRouteUpdate
使用場景:
  • 在當前路由改變時,並且該組件被複用時調用,可以通過this訪問實例。
  • 當前路由query變更時,該守衛會被調用。
 beforeRouteLeave
使用場景:
導航離開該組件的對應路由時調用,可以訪問組件實例this

路由守衛執行的完整過程

  • 導航被觸發
  • 執行 組件內部路由守衛: 
    beforeRouteLeave
  • 執行 全局路由守衛 
    beforeEach
  • 在重用組件內部路由守衛鉤子 
     beforeRouteUpdate
  • 執行 路由中的鉤子 
     beforeEnter
  • 在被激活的組件裏調用 beforeRouteEnter
  • 執行 全局的 beforeResolve 守衛 。
  • 執行 全局的 afterEach 鉤子
  • beforeCreate
  • created
  • beforeMount
  • mounted
  • 執行 beforeRouteEnter的next的回調 ,創建好的組件實例會作為回調函數的參數傳入。

null

結語

️關注+點贊+收藏+評論+轉發️,原創不易,
版权声明:本文为[InfoQ]所创,转载请带上原文链接,感谢。 https://gsmany.com/2022/204/202207232059467877.html