Vue路由守卫之组件内路由守卫

Vue路由守卫之组件内路由守卫

​        beforeRouteEnter,进入路由前。

需要注意这里不能使用this,因为我们使用的是进入路由之前，那会组件还没创建，得不到this这个属性，所有我们只能使用过vm异步语句来让节点上树；

<script>

    export default {

        data(){

            return{

                num : 10

            }

        },

        beforeRouteEnter:(to,from,next)=>{

            next(vm=>{

                alert(vm.num)

            })

        },

​

    }

</script>

　　

运行后可以看到，在使用beforeRouteEnter，使用的vm异步语句得到

beforeRouteLeave：离开路由之前可以被调用，可以访问里面的this属性！

<script>

    export default {

        data(){

            return{

                num : 10

            }

        },

        beforeRouteLeave (to, from, next) {

            if(confirm('确定离开吗？') === true){

                next()

            }else{

                next('aa')

            }

        }

    }

</script>

　　

运行后可以看到，使用beforeRouteLeave(离开路由之前)，系统会询问是否要离开，点击取消系统不会跳转，点击确定之后系统才会跳转离开。

所以我们可以在离开路由之前做一些事情；

为大家奉上导航守卫完整的解析流程

1. 导航被触发。
   

   
   

2. 在失活的组件里调用离开守卫。
   

   
   

3. 调用全局的 beforeEach 守卫。
   

   
   

4. 在重用的组件里调用 beforeRouteUpdate 守卫 (2.2+)。
   

   
   

5. 在路由配置里调用 beforeEnter。
   

   
   

6. 解析异步路由组件。
   

   
   

7. 在被激活的组件里调用 beforeRouteEnter。
   

   
   

8. 调用全局的 beforeResolve 守卫 (2.5+)。
   

   
   

9. 导航被确认。
   

   
   

10. 调用全局的 afterEach 钩子。
    

    
    

11. 触发 DOM 更新。
    

    
    

12. 用创建好的实例调用 beforeRouteEnter 守卫中传给 next 的回调函数。
    

    
    

下面为大家附上源码地址 https://gitee.com/web94/vuezujianneiluyou

如果觉得不错请点点手指，关注下我们公众号，我们会长期为您分享前端知识点；