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(离开路由之前),系统会询问是否要离开,点击取消系统不会跳转,点击确定之后系统才会跳转离开。所以我们可以在离开路由之前做一些事情;
为大家奉上导航守卫完整的解析流程
-
导航被触发。
-
在失活的组件里调用离开守卫。
-
调用全局的
beforeEach
守卫。 -
在重用的组件里调用
beforeRouteUpdate
守卫 (2.2+)。 -
在路由配置里调用
beforeEnter
。 -
解析异步路由组件。
-
在被激活的组件里调用
beforeRouteEnter
。 -
调用全局的
beforeResolve
守卫 (2.5+)。 -
导航被确认。
-
调用全局的
afterEach
钩子。 -
触发 DOM 更新。
-
用创建好的实例调用
beforeRouteEnter
守卫中传给next
的回调函数。
下面为大家附上源码地址 https://gitee.com/web94/vuezujianneiluyou
如果觉得不错请点点手指,关注下我们公众号,我们会长期为您分享前端知识点;
标签:Vue,next,守卫,调用,组件,beforeRouteEnter,路由 来源: https://www.cnblogs.com/webfy/p/11516247.html