路由防衛(wèi)

路由防衛(wèi)用于通過路由跳轉(zhuǎn)，或取消的方式守衛(wèi)路由，如驗(yàn)證碼。
路由導(dǎo)航有

• 全局的
• 單個(gè)路由獨(dú)享的
• 組件級的

1.全局鉤子

全局前置守衛(wèi)beforEach()

項(xiàng)目加載后進(jìn)入函數(shù)，用于登錄權(quán)限管理較多，參數(shù)為一個(gè)回調(diào)函數(shù)
回調(diào)函數(shù)有三個(gè)參數(shù)

• to：即將要進(jìn)入的目標(biāo)路由對象
• from：當(dāng)前導(dǎo)航正要離開的路由
• next：執(zhí)行下一步
  next(true)繼續(xù)執(zhí)行
  next(false)或不寫為終止執(zhí)行
  next(path)跳轉(zhuǎn)路由

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

全局后置鉤子afterEach

很少使用，不用next參數(shù)，因?yàn)閚ext也不會(huì)改變導(dǎo)航本身，全局結(jié)束。

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

2.路由獨(dú)享的守衛(wèi)beforeEnter

用法和全局路由相同，但只能守衛(wèi)當(dāng)前設(shè)置的路由

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

3.組件內(nèi)路由

組件內(nèi)路由和鉤子函數(shù)等平等關(guān)系。

beforeRouterEnter

組件在confirm前調(diào)用，不能用this，因?yàn)闆]用實(shí)例化，可以通過next獲取數(shù)據(jù)

beforeRouteUpdate

路由更新時(shí)調(diào)用

beforeRouteLeave

路由離開時(shí)調(diào)用，防止用戶重要數(shù)據(jù)丟失。

4.返回上一級路由

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。