#在切換路由時(shí)，組件會(huì)被復(fù)用，不過，這也意味著組件的生命周期鉤子不會(huì)再被調(diào)用。

　　　解決辦法有兩種，1簡(jiǎn)單地 watch (監(jiān)測(cè)變化) $route 對(duì)象：

const User = {
 template: '...',
 watch: {
  '$route' (to, from) {
   // 對(duì)路由變化作出響應(yīng)...
  }
 }
}

　　　　2.使用 2.2 中引入的 beforeRouteUpdate 導(dǎo)航守衛(wèi)：

const User = {
 template: '...',
 beforeRouteUpdate (to, from, next) {
  // react to route changes...
  // don't forget to call next()
 }
}

#全局守衛(wèi)

你可以使用 router.beforeEach 注冊(cè)一個(gè)全局前置守衛(wèi)：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

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

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

•next: Function: 一定要調(diào)用該方法來(lái) resolve 這個(gè)鉤子

#全局解析守衛(wèi)

在 2.5.0+ 你可以用 router.beforeResolve 注冊(cè)一個(gè)全局守衛(wèi)。這和 router.beforeEach 類似，區(qū)別是在導(dǎo)航被確認(rèn)之前，同時(shí)在所有組件內(nèi)守衛(wèi)和異步路由組件被解析之后，解析守衛(wèi)就被調(diào)用。

#全局后置鉤子

你也可以注冊(cè)全局后置鉤子，然而和守衛(wèi)不同的是，這些鉤子不會(huì)接受 next 函數(shù)也不會(huì)改變導(dǎo)航本身：

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

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

你可以在路由配置上直接定義 beforeEnter 守衛(wèi)

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

這些守衛(wèi)與全局前置守衛(wèi)的方法參數(shù)是一樣的。

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

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

const Foo = {
 template: `...`,
 beforeRouteEnter (to, from, next) {
  // 在渲染該組件的對(duì)應(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)用
  // 舉例來(lái)說(shuō)，對(duì)于一個(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)航離開該組件的對(duì)應(yīng)路由時(shí)調(diào)用
  // 可以訪問組件實(shí)例 `this`
 }
}

beforeRouteEnter 守衛(wèi) 不能 訪問 this，因?yàn)槭匦l(wèi)在導(dǎo)航確認(rèn)前被調(diào)用,因此即將登場(chǎng)的新組件還沒被創(chuàng)建。

不過，你可以通過傳一個(gè)回調(diào)給 next來(lái)訪問組件實(shí)例。在導(dǎo)航被確認(rèn)的時(shí)候執(zhí)行回調(diào)，并且把組件實(shí)例作為回調(diào)方法的參數(shù)。

export default {
  data(){
    return {
       num: 18
    }
  },
  beforeRouteEnter(to, from, next){
    next(vm=>{
      vm.num=22;
    })
  }
}

注意 beforeRouteEnter 是支持給 next 傳遞回調(diào)的唯一守衛(wèi)。對(duì)于 beforeRouteUpdate 和 beforeRouteLeave 來(lái)說(shuō)，this 已經(jīng)可用了，所以不支持傳遞回調(diào)，因?yàn)闆]有必要了

#完整的導(dǎo)航解析流程

1.導(dǎo)航被觸發(fā)。
2.在失活的組件里調(diào)用離開守衛(wèi)。
3.調(diào)用全局的 beforeEach 守衛(wèi)。
4.在重用的組件里調(diào)用 beforeRouteUpdate 守衛(wèi) (2.2+)。
5.在路由配置里調(diào)用 beforeEnter。
6.解析異步路由組件。
7.在被激活的組件里調(diào)用 beforeRouteEnter。
8.調(diào)用全局的 beforeResolve 守衛(wèi) (2.5+)。
9.導(dǎo)航被確認(rèn)。
10.調(diào)用全局的 afterEach 鉤子。
11.觸發(fā) DOM 更新。
12.用創(chuàng)建好的實(shí)例調(diào)用 beforeRouteEnter 守衛(wèi)中傳給 next 的回調(diào)函數(shù)。

#在全局導(dǎo)航守衛(wèi)中檢查元字段

router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {
  //如果路由中有meta的requireAuth，且為true，就不進(jìn)行登錄驗(yàn)證，否則進(jìn)行登錄驗(yàn)證
  if (!auth.loggedIn()) {
   next({
    path: '/login',
    query: { redirect: to.fullPath }
   })
  } else {
   next()
  }
 } else {
  next() // 確保一定要調(diào)用 next()
 }
})

一個(gè)路由匹配到的所有路由記錄會(huì)暴露為 $route 對(duì)象 (還有在導(dǎo)航守衛(wèi)中的路由對(duì)象) 的 $route.matched 數(shù)組。因此，我們需要遍歷 $route.matched 來(lái)檢查路由記錄中的 meta 字段。

　　注：1、meta 字段就是路由元信息字段，requiresAuth 是自己起的字段名稱，用來(lái)標(biāo)記這個(gè)路由信息是否需要檢測(cè)，true 表示要檢測(cè)，false 表示不需要檢測(cè)（這個(gè)名稱隨便起，比如我自己的就起的 requiresId，建議起個(gè)有意義的名稱）

　　2、if (to.matched.some(record => record.meta.requiresAuth) )，如果對(duì)這類寫法不熟悉，可以去看看es6的箭頭函數(shù)，這句話就是返回遍歷的某個(gè)路由對(duì)象，我們定義為為record，檢測(cè)這個(gè)對(duì)象是否擁有meta這個(gè)對(duì)象，如果有meta這個(gè)對(duì)象，檢測(cè)它的meta對(duì)象是不是有requiresAuth這個(gè)屬性，且為true，如果滿足上述條件，就確定了是這個(gè)/foo/bar路由。

　　3、some() 方法測(cè)試數(shù)組中的某些元素是否通過了指定函數(shù)的測(cè)試。語(yǔ)法：arr.some(callback[, thisArg])；

　　　　some 為數(shù)組中的每一個(gè)元素執(zhí)行一次 callback 函數(shù)，直到找到一個(gè)使得 callback 返回一個(gè)“真值”（即可轉(zhuǎn)換為布爾值 true 的值）。如果找到了這樣一個(gè)值，some 將會(huì)立即返回 true。否則，some 返回 false。callback 只會(huì)在那些”有值“的索引上被調(diào)用，不會(huì)在那些被刪除或從來(lái)未被賦值的索引上調(diào)用。

  　　　callback 被調(diào)用時(shí)傳入三個(gè)參數(shù)：元素的值，元素的索引，被遍歷的數(shù)組。

　　4、vue-router路由元信息說(shuō)白了就是通過meta對(duì)象中的一些屬性來(lái)判斷當(dāng)前路由是否需要進(jìn)一步處理，如果需要處理，按照自己想要的效果進(jìn)行處理即可！

總結(jié)

以上所述是小編給大家介紹的關(guān)于Vue Router中路由守衛(wèi)的應(yīng)用及在全局導(dǎo)航守衛(wèi)中檢查元字段的方法，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

最新評(píng)論