vue路由守卫 —— 组件内beforeRouteEnter
beforeRouteEnter在渲染该组件的对应路由被确认前调用,用法和参数与beforeEach类似,next需要被主动调用注意:此时组件实例还未被创建,不能访问this可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数beforeRouteEnter(to, from, next) {console.log(this); // 这里打印
·
beforeRouteEnter
在渲染该组件的对应路由被确认前调用,用法和参数与beforeEach
类似,next
需要被主动调用
注意:
- 此时组件实例还未被创建,不能访问this
- 可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调,并且把组件实例作为回调方法的参数
beforeRouteEnter(to, from, next) {
console.log(this); // 这里打印this是undefined
console.log(to, '参数1:即将要进入的目标 路由对象');
console.log(from, '参数2:当前导航正要离开的路由');
console.log(next, '参数3:Function: 一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。意思就是next()一定要调用,要不然不会往下运行');
next(vm => {
//因为当钩子执行前,组件实例还没被创建
// vm 就是当前组件的实例相当于上面的 this,所以在 next 方法里你就可以把 vm 当 this 来用了。
console.log(vm);//当前组件的实例,可以进行操作
});
}
- 可以在这个守卫中请求服务端获取数据,当成功获取并能进入路由时,调用
next
并在回调中通过vm
访问组件实例进行赋值等操作 beforeRouteEnter
触发在导航确认、组件实例创建之前:beforeCreate
之前;而next
中函数的调用在mounted
之后:为了确保能对组件实例的完整访问
与watch监听路由的区别:
watch:{
$route(newVal,oldVal){
//组件内写watch,只要该组件触发过一次,则会在其他页面也会触发
}
}
随记,有时间再补全.有疑问请留言
更多推荐
已为社区贡献1条内容
所有评论(0)