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是路由更新时触发,从主页进入登录界面不会触发这个钩子函数,一个父路由下的子路由跳转会触发这个钩子函数。

 

Logo

前往低代码交流专区

更多推荐