路由防衛

路由防衛用于通過路由跳轉，或取消的方式守衛路由，如驗證碼。
路由導航有

• 全局的
• 單個路由獨享的
• 組件級的

1.全局鉤子

全局前置守衛beforEach()

項目加載后進入函數，用于登錄權限管理較多，參數為一個回調函數
回調函數有三個參數

• to：即將要進入的目標路由對象
• from：當前導航正要離開的路由
• next：執行下一步
  next(true)繼續執行
  next(false)或不寫為終止執行
  next(path)跳轉路由

/*** @param {to} 將要去的路由* @param {from} 出發的路由* @param {next} 執行下一步*/router.beforeEach((to, from, next) => {document.title = to.meta.title || '賣座電影';if (to.meta.needLogin && !$store.state.isLogin) {next({path: '/login'})} else {next()}})

全局后置鉤子afterEach

很少使用，不用next參數，因為next也不會改變導航本身，全局結束。

router.afterEach((to, from) => {// ...})

2.路由獨享的守衛beforeEnter

用法和全局路由相同，但只能守衛當前設置的路由

//登錄模塊path: '/login',component: () => import('@/views/login'),beforeEnter: (to, from, next) => {if (to.meta.needLogin && !$store.state.isLogin) {next({path: '/login'})} else {next()}}

3.組件內路由

組件內路由和鉤子函數等平等關系。

beforeRouterEnter

組件在confirm前調用，不能用this，因為沒用實例化，可以通過next獲取數據

beforeRouteUpdate

路由更新時調用

beforeRouteLeave

路由離開時調用，防止用戶重要數據丟失。

4.返回上一級路由

第一種：history.back();第二種：this.$router.go(-1);

總結

以上是生活随笔為你收集整理的vue-router路由防卫的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。