這篇文章將為大家詳細講解有關(guān)vue-router導(dǎo)航守衛(wèi)的示例分析，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

讓客戶滿意是我們工作的目標(biāo)，不斷超越客戶的期望值來自于我們對這個行業(yè)的熱愛。我們立志把好的技術(shù)通過有效、簡單的方式提供給客戶，將通過不懈努力成為客戶在信息化領(lǐng)域值得信任、有價值的長期合作伙伴，公司提供的服務(wù)項目有：域名與空間、虛擬空間、營銷軟件、網(wǎng)站建設(shè)、渭城網(wǎng)站維護、網(wǎng)站推廣。

當(dāng)做Vue-cli項目的時候需要在路由跳轉(zhuǎn)前做一些驗證，比如登錄驗證，是網(wǎng)站中的普遍需求。

對此，vue-router 提供的 beforeEach可以方便地實現(xiàn)全局導(dǎo)航守衛(wèi)（navigation-guards）。組件內(nèi)部的導(dǎo)航守衛(wèi)函數(shù)使用相同，只是函數(shù)名稱不同（beforeRouteEnter 、beforeRouteUpdate(2.2 新增) 、beforeRouteLeave）。

鉤子(Hook)，早期編程可能有個概念叫句柄，不知道將兩者類比而且強行歸為一類是不是合適。鉤子的用處是在某個特定流程中的不同時機暴露出一些函數(shù)，使得用戶可以通過覆寫這些函數(shù)實現(xiàn)在原有位置執(zhí)行自己的代碼邏輯的功能。

1. 分類

vue-router中的導(dǎo)航鉤子按定義位置不同(執(zhí)行時機也不同)分為全局鉤子、路由級鉤子和組件級鉤子。

• 全局鉤子

全局鉤子有三個，分別是beforeEach、beforeResolve和afterEach，在路由實例對象注冊使用；

• 路由級鉤子

路由級鉤子有beforeEnter，在路由配置項中項定義；

• 組件級鉤子

組件級鉤子有beforeRouteEnter、beforeRouteUpdate和beforeRouteLeave，在組件屬性中定義；

官方文檔地址：https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

如何設(shè)置一個全局守衛(wèi)

你可以使用 router.beforeEach 注冊一個全局前置守衛(wèi)：就是在你router配置的下方注冊

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

當(dāng)一個導(dǎo)航觸發(fā)時，全局前置守衛(wèi)按照創(chuàng)建順序調(diào)用。守衛(wèi)是異步解析執(zhí)行，此時導(dǎo)航在所有守衛(wèi) resolve 完之前一直處于 等待中。

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

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

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

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

• next(): 進行管道中的下一個鉤子。如果全部鉤子執(zhí)行完了，則導(dǎo)航的狀態(tài)就是 confirmed （確認的）。

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

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

• next(error): (2.4.0+) 如果傳入 next 的參數(shù)是一個 Error 實例，則導(dǎo)航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調(diào)。

確保要調(diào)用 next 方法，否則鉤子就不會被 resolved。

一、認識beforeEach()中的參數(shù)

全局守衛(wèi)（就是對整個路由實例進行守衛(wèi)，對其中的子路由也會進行守衛(wèi)）

路由獨享的守衛(wèi)（對實例中某個路由進行守衛(wèi)）

小結(jié)：

全局和局部

import Vue from 'vue';
import VueRouter from 'vue-router';
// Vue中插件必須use注冊
Vue.use(VueRouter);
// 路由配置項，此處是路由級鉤子的定義
const routes = [{
    path: '/',
    component: resolve => require(['./index.vue'], resolve),
    keepAlive: true,
  },
  {
    path: '/user/:userName',
    keepAlive: true,
    beforeEnter(to,from,next){
      console.log('router beforeEnter');
      next();
    },
    component: resolve => require(['./user.vue'], resolve),
  }];
// 實例化路由對象
const router = new VueRouter({
  routes
});
// 全局鉤子
router.beforeEach((to,from,next)=>{
  console.log('global beforeEach')
  next();
});
router.beforeResolve((to,from,next)=>{
  console.log('global beforeResolve')
  next();
});
router.afterEach((to,from,next)=>{
  console.log('global afterEach')
});
// 實例化Vue對象并掛載
new Vue({
  router
}).$mount('#app');

use.vue組件中使用導(dǎo)航守衛(wèi)

執(zhí)行時機

由首頁進入user頁面：

global beforeEach > router beforeEnter > component beforeRouteEnter > global beforeResolve > global afterEach > mounted

由user回到首頁：

component beforeRouteLeave => global beforeEach => global beforeResolve => global afterEach

排除beforeRouteUpdate，其余六個導(dǎo)航鉤子的執(zhí)行時機其實很好理解。大體按照leave、before、enter、resolve、after的順序并全局優(yōu)先的思路執(zhí)行。beforeRouteUpdate的觸發(fā)是在動態(tài)路由情形下，比如 path: '/user/:userName' 這條路由，當(dāng)頁面不變更只動態(tài)的改變參數(shù)userName時，beforeRouteUpdate便會觸發(fā)。

結(jié)論：使用vue組件拼湊成整個應(yīng)用，每個頁面是獨立的，路由依靠鏈接跳轉(zhuǎn)，會刷新頁面。使用vue-router則可以不刷新頁面加載對應(yīng)組件，hash和history模式模擬路徑變化，不刷新頁面。

關(guān)于“vue-router導(dǎo)航守衛(wèi)的示例分析”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。