Vue中路由守衛(wèi)怎么用

小編給大家分享一下Vue中路由守衛(wèi)怎么用，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！

1.全局守衛(wèi)

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

顧名思義，前置守衛(wèi)主要是在你進(jìn)行路由跳轉(zhuǎn)之前根據(jù)你的狀態(tài)去 進(jìn)行一系列操作（全局前置是為在路由初始化以及跳轉(zhuǎn)之前都會(huì)觸發(fā)）

你可以使用router.beforeEach注冊一個(gè)全局前置守衛(wèi)（Each：每個(gè)，即在任意一個(gè)路由跳轉(zhuǎn)的時(shí)候都會(huì)觸發(fā)）

每個(gè)守衛(wèi)方法接收三個(gè)參數(shù)：

to:Route:即將進(jìn)入目標(biāo)的路由對象

from:Route：當(dāng)前導(dǎo)航正要離開的路由

next:function:一定要調(diào)用該方法來resolve這個(gè)鉤子。執(zhí)行效果依賴next方法的調(diào)用參數(shù)

1. next()：進(jìn)行管道中的額下一個(gè)鉤子（to）。如果鉤子執(zhí)行完了，則導(dǎo)航狀態(tài)就是confirmed(確認(rèn)的)

2. next(false)：中斷當(dāng)前的導(dǎo)航。如果瀏覽器的URL改變了（可能用戶手動(dòng)或者瀏覽器按后退按鈕），那么地址會(huì)重置到from路由對應(yīng)的地址。

3.next('/")或者next( { path: '/' } )：跳轉(zhuǎn)到一個(gè)同的地址。當(dāng)前的導(dǎo)航被中斷，然后進(jìn)行下一個(gè)新的導(dǎo)航。你可以想next傳遞任意對象，且允許設(shè)置諸如replace:true、name:'home‘ 之類的選項(xiàng)以及任何用下router-link的 to prop或者router.push中的選項(xiàng)

確保next函數(shù)在任何給定的導(dǎo)航守衛(wèi)中被嚴(yán)格調(diào)用一次，它可以出現(xiàn)多余一次，但是只能在所有的邏輯路徑都不重疊的情況下，否則鉤子永遠(yuǎn)都不會(huì)被解析或者錯(cuò)誤。

1.1.1 使用

可以打印出from、to、next看他們究竟會(huì)保存那些信息

舉例

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import News from '../views/News.vue'
import Message from '../views/Message.vue'
 
Vue.use(VueRouter)
 
const routes = [{
    path: '/home',
    name: 'Home',
    component: Home,
    children:[
      {
        path: 'message', //此處不要寫成：/news
        component: Message
      }
    ]
  },
  {
    path: '/about',
    name: 'aboutName',
    component: About,
    children: [{ //通過children配置子級路由
      path: 'news', //此處不要寫成：/news
      component: News
    }]
  }
]
 
const router = new VueRouter({
  routes
})
 
//全局前置路由守衛(wèi)---初始化的時(shí)候被調(diào)用、每次路由切換的時(shí)候被調(diào)用
router.beforeEach((to, from, next) => {
  console.log(to);
  //這里是一個(gè)簡單的例子
  //即判斷用戶是否進(jìn)入了需要鑒權(quán)的路由下（這里距離為news和message）
  if (to.path == '/home/message' || to.path === '/about/news') {
    //如果進(jìn)入了，那就判斷本地是否緩存了信息（這里模擬登錄的token)
    if (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  }else{
    //如果不是，則直接放心即可
    next()
  }
})
export default router

上面這個(gè)例子有個(gè)不足之處是，當(dāng)需要鑒權(quán)的路由很多的時(shí)候，那你需要一個(gè)一個(gè)的去判斷？那大可不必，因此這里引入路由的另一屬性，即meta，可以在每個(gè)路由中進(jìn)行配置，一般用來標(biāo)識具有標(biāo)識性的屬性，可以用力啊同意判斷，具體如下：

//使用meta
router.beforeEach((to, from, next) => {
  console.log(to);
  if (to.meta.isAuth) {//判斷是否需要鑒權(quán)
    if (localStorage.getItem('name') === 'haungzhizhen') {
      next()
    }
  } else {
    next()
  }
})

1.2 全局后置路由守衛(wèi)

//全局后置路由守衛(wèi)---初始化的時(shí)候被調(diào)用、每次路由切換之后被調(diào)用
router.afterEach((to, from) => {
  if (to.meta.title) {
    document.title = to.meta.title || '路由跳轉(zhuǎn)舉例'//修改網(wǎng)頁的title
  }else{
    document.title = 'vue_test'
  }
})

1.3 整合

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

你可以在路由配置直接定義beforeEnter守衛(wèi)，這些參數(shù)與全局前置守衛(wèi)的方法參數(shù)是一樣的

const router = new VueRouter({
  routes: [
    {
      path: '/foo',
      component: Foo,
      beforeEnter: (to, from, next) => {
        // ...
      }
    }
  ]
})

3.組件內(nèi)的守衛(wèi)

最后，你可以在路由組件內(nèi)直接定義一下路由導(dǎo)航守衛(wèi)：

• beforeRouterEnter

• beforeRouterUpdate

• beforeRouterLeave

const Foo = {
  template: `...`,
  beforeRouteEnter(to, from, next) {
    // 在渲染該組件的對應(yīng)路由被 confirm 前調(diào)用
    // 不！能！獲取組件實(shí)例 `this`
    // 因?yàn)楫?dāng)守衛(wèi)執(zhí)行前，組件實(shí)例還沒被創(chuàng)建
  },
  beforeRouteUpdate(to, from, next) {
    // 在當(dāng)前路由改變，但是該組件被復(fù)用時(shí)調(diào)用
    // 舉例來說，對于一個(gè)帶有動(dòng)態(tài)參數(shù)的路徑 /foo/:id，在 /foo/1 和 /foo/2 之間跳轉(zhuǎn)的時(shí)候，
    // 由于會(huì)渲染同樣的 Foo 組件，因此組件實(shí)例會(huì)被復(fù)用。而這個(gè)鉤子就會(huì)在這個(gè)情況下被調(diào)用。
    // 可以訪問組件實(shí)例 `this`
  },
  beforeRouteLeave(to, from, next) {
    // 導(dǎo)航離開該組件的對應(yīng)路由時(shí)調(diào)用
    // 可以訪問組件實(shí)例 `this`
  }
}

看完了這篇文章，相信你對“Vue中路由守衛(wèi)怎么用”有了一定的了解，如果想了解更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道，感謝各位的閱讀！