Vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。导航守卫分为：全局守卫、路由独享守卫、组件内守卫。
一、全局守卫
全局守卫的语法：
let router = new VueRouter({
routes: [//配置性
{…}
]
})
全局守卫又分为全局前置守卫和全局后置守卫
1.全局前置守卫
可以使用router.beforeEach 注册一个全局前置守卫，其语法为：
router.beforeEach((to, from, next) => {
…….拦截操作
next();
// next(false);
})
该守卫可接收三个参数：
（1）to:Route表示即将要进入的目标路由对象
（2）from:Router当前导航正要离开的路由
（3）next:function表示执行效果依赖next方法的调用参数
next()表示进入管道的下一个钩子，类似于迭代器中的next(),若全部钩子执行完毕后，导航的状态为confirmed(确认的)，前置守卫有拦截操作，所以需要调用next方法执行。
next(false)表示中断当前导航
2.全局后置守卫
router.afterEach((to, from) => {
…….之后操作
})
该守卫可接收两个参数：
（1）to:Route表示即将要进入的目标路由对象
（2）from:Router当前导航正要离开的路由
它不会接受next()函数也不会改变导航本身
二、路由独享守卫
可以在路由配置上直接定义 beforeEnter 守卫。
let router = new VueRouter({
routes: [
{
path: ‘/a’,
component: com1,
beforeEnter(to, from, next) {
…….拦截操作
next();
}
}
]
})
该守卫于全局前置守卫的方法的参数一样
三、组件内守卫
组件内守卫顾名思义就是在组件内进行守卫操作，其可进行的守卫操作有：
1.beforeRouteEnter表示进入组件之前进行拦截
beforeRouteEnter(to, from, next) {
…….拦截操作
next();
},
beforeRouteEnter这个守卫操作要注意的是不能使用this，是因为在进入路由之前，组件还未创建，因此得不到this属性。
2. beforeRouteUpdate表示在当前组件中，路由发生改变时触发
beforeRouteUpdate(to, from, next) {
…….拦截操作
next();
},
3.beforeRouteLeave表示离开组件之前触发
beforeRouteLeave(to, from, next) {
…….拦截操作
next();
}
beforeRouteLeave（离开守卫）通常用来禁止用户在还未保存修改前突然离开。该导航可访问this属性并且可以通过 next(false) 来取消。