[JavaScript知识库]Vue学习笔记—导航守卫

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) 来取消。