這篇文章千鋒長沙前端培訓說說VUE-router導航守衛。首先要知道vue-router有哪幾種導航守衛?其實就三種：全局守衛、路由獨享守衛、路由組件內的守衛。

1.全局守衛

vue-router全局有三個守衛：

router.beforeEach 全局前置守衛 進入路由之前

router.beforeResolve 全局解析守衛(2.5.0+) 在beforeRouteEnter調用之后調用

router.afterEach 全局后置鉤子 進入路由之后

使用方法:

// main.js 入口文件

import router from './router'; // 引入路由

router.beforeEach((to, from, next) => {

next();

});

router.beforeResolve((to, from, next) => {

next();

});

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

console.log('afterEach 全局后置鉤子');

});

2.路由獨享守衛

如果你不想全局配置守衛的話，你可以為某些路由單獨配置守衛：

const router = new VueRouter({

routes: [

{

path: '/foo',

component: Foo,

beforeEnter: (to, from, next) => {

// 參數用法什么的都一樣,調用順序在全局前置守衛后面，所以不會被全局守衛覆蓋

// ...

}

}

]

})

3.路由組件內的守衛

beforeRouteEnter 進入路由前, 在路由獨享守衛后調用 不能 獲取組件實例 this，組件實例還沒被創建。

beforeRouteUpdate (2.2) 路由復用同一個組件時, 在當前路由改變，但是該組件被復用時調用 可以訪問組件實例 this。

beforeRouteLeave 離開當前路由時, 導航離開該組件的對應路由時調用，可以訪問組件實例 this。

上一篇

千鋒長沙前端培訓：CSS高度塌陷的8種方法以及優缺點

下一篇

千鋒長沙前端培訓：Vue的雙向數據綁定原理