有关vue中导航守卫的理解

个人理解导航守卫的意思就是说在路由跳转过程前、中、后做一些操作，就有些类似vue的生命周期那几个阶段的作用一样，

分类：全局的、单个路由独享、组件内的

参数：每个守卫有三个参数

           1、to:将要进入的目标的路由====就是当前你在的路由

           2、from:将要离开的路由====在当前路由之前的路由

           3、next:函数     
                     next()  
                    next(false):中断当前导航

                   next('/') 或者 next({ path: '/' })：跳转到不同的地址
      next(erro):导航会被终止且该错误会被传递给 router.onError() 注册过的回调。
(1)全局路由：

     beforeEach      全局前置守卫

     beforeResolve   导航被确认之前，同时在所有组件内守卫和异步路由组件被解析之后，解析守卫就被调用

               afterEach                     接受to 和 from 参数 没有next参数，不会改变导航状态
（2）单独的导航：

             beforeEnter     

             const router = new VueRouter({

 　　　　routes: [ 　　　　{ 　　　　 path: '/foo', 　　　　component: Foo, 　　　　beforeEnter: (to, from, next) => { 　　　　// ... 　　　　} 　　　　 } 　　　　] 　　　　})

    （3）组件内的

            beforeRouteEnter 
            beforeRouteUpdate

            beforeRouteLeave

           

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

导航的过程：
     导航被触发
     失活组件中触发      beforeRouteLeave （所谓失活就是说你要把这个守卫写在你将要离开的这个组件里使用，因为你要离开它了嘛，所以就要失去了呀）
     beforeEach
     重用组件触发         beforeRouteUpdate
     在路由配置里调用      beforeEnter
     解析异步路由组件
     在被激活的组件中触发    beforeRouteEnter （所谓激活就是进入这个页面的时候，来了就激活嘛，激活了要做哪些操作就在这里写就可以了）
     调用全局的            beforeResolve
     导航被确认
     调用全局的            afterEach
     触发DOM更新
     用创建好的实例去调用    beforeRouteEnter守卫中去调用next()回调函数


以上是个人理解及摘录与官网，欢迎有不同见解的小伙伴留言交流哦