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。