vue-router导航守卫

什么是导航守卫？

导航守卫就是通过跳转或者取消的方式守卫导航。

1.全局前置守卫

分为全局前置守卫、

通过router.beforeEach注册全局前置守卫

const router=new VueRuter({
})
router.beforeEach((to,from,next)=>{
    //do something
})

参数解析

-to:route即将进入的目标路由对象。
- from:route当前导航正要离开的路由。
- next:Function一定要调用该方法来resolve这个钩子。
– next():进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态是confirmed(确认)的。
–next(false):中断当前导航。URL会重置到from路由对应的地址。
–next('/')或者next({ path:'/' }):跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。你可以向next()传递任意位置对象。且允许设置诸如replace:true、name:'home'之类的对象。以及任何在router-link中的to属性，router.push()之中的选项。

2.全局解析守卫

3.全局后置钩子

后置钩子和前置钩子有点类似。和守卫不同的是不会接受next函数，也不会改变导航本身。

router.afterEach((to,from)=>{
    //do something
})

4.路由独享的守卫

可以在路由上直接定义beforeEnter守卫，这些参数跟全局前置守卫的是一样的。

const router=new VueRouter({
    routes:[
        {
            path:'/foo',
            component:Foo,
            beforeEnter:(to,from,next)=>{
                //do something
            }
        }
    ]
})

5.组件内的守卫

可以在组件内定义路由导航守卫。

const Foo={
    template:`...`,
    beforeRouteEnter(to,from,next){
    //在渲染该组件的对应路由  被confirm前  调用
    //不能获取组件实例 this
    //因为当守卫执行前，组件实例还没有被创建
    },
    beforeRouteUpdate(to,from,next){//2.2新增
    //当路由被改变但是该组件被复用时调用
    //举例来说，对于一个带有动态参数的路径/foo/:id,在/foo/1和/foo/2之间跳转，由于会渲染同样的Foo组件，
    //因此组件实例会被复用，这个钩子就会被调用。
    //可以访问组件实例的 this
    },
    beforeRouteLeave(ro,from,next){
    //导航离开该组件的对应路由时调用
    //可以访问组件实例的this
    }
}

虽然beaforeRouteEnter守卫不能访问this,但是有一个折中的方法：传一个回调给next

beforeRouteEnter(to,from,next){
 next(vm=>{
  //通过vm访问组件实例
 })
}

beforeRouteLeave守卫通常用来禁止用户在还没有保存修改前离开。该导航可以通过next(false)来取消。

beforeRouteLeave(to,from,next){
 const answer=window.confirm('do you really want to leave?you1 have unsaved change!')
 if (answer){
  next()
 }else{
  next(false)
 }
}

6.完整的导航解析流程

1.导航被出发
2.在失活的组件里调用离开守卫
3.调用全局的beforeEach守卫
4.在重用的组件里调用beforeRouteUpdate守卫（2.2+）
5.在路由配置里调用beforeEnter
6.解析异步路由组件
7.在被**的组件里调用beforeRouteEnter
8.调用全局的aferResolved守卫（2.5+）
9.导航被确认
10.调用全局的afterEach钩子
11.出发DOM更新
12.用创建好的实例调用beforeRouteEnter守卫中传给next的回调函数。

官网链接