vue页面已经跳转,但是watch获取不到$route
1、问题描述:在开发的时候使用 this.$router.push({path:"/test",query:{name:"test"}}) 进行页面跳转,页面已经跳转至test了,并且路由显示"test?name='test' "(1)watch监听获取$route(to, from) {console.log(this.$route);//打印空对象,获...
1、问题描述:
在开发的时候使用 this.$router.push({path:"/test",query:{name:"test"}}) 进行页面跳转,
页面已经跳转至test了,并且路由显示"test?name='test' "
(1)watch监听获取
$route(to, from) {
console.log(this.$route);//打印空对象,获取不到
}
在test页面watch中监听不到路由变化,获取不到$route的数据。
(2)beforeRouteEnter 钩子函数获取
beforeRouteEnter(to, from, next) {
next(vm => {
// 通过 `vm` 访问fetchData,将query参数name,传递过去,进行逻辑处理
console.log(vm.$route);//有值
vm.fetchData(vm.$route.query.name);
});
}
注释:beforeRouteEnter执行时候,组件实例还没被创建,所以不能直接将name赋值给 data中的变量,必须 通过`vm` 访问fetchData,在fetchData()方法中进行赋值操作。
(3)两者的区别
参考这篇博客:
https://blog.csdn.net/qq_28719103/article/details/83503332
beforeRouteEnter是新进入的一个路由,比如进入/login登录界面,会触发beforeRouteEnter这个钩子;
而beforeRouteUpdate是路由更新时触发,从主页进入登录界面不会触发这个钩子函数,一个父路由下的子路由跳转会触发这个钩子函数。
更多推荐
所有评论(0)