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);//打印空对象，获取不到

}

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