千鋒長沙前端培訓：VUE-router導航守衛講解

      這篇文章千鋒 說說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。