vue监听路由变化的几种方式小结

监听路由变化的几种方式小结

vue页面开发中，我们经常需要根据路由的变化去实现一些操作，那么如何监听路由的变化呢？当然是利用VUE中的watch，请看代码。

一、监听路由从哪儿来到哪儿去

watch:{
?? ?$route(to,from){
?? ? ?console.log(from.path);//从哪来
?? ? ?console.log(to.path);//到哪去
?? ?}
}

二、监听路由变化获取新老路由信息

?watch:{
? ? $route:{
? ? ? handler(val,oldval){
? ? ? ? console.log(val);//新路由信息
? ? ? ? console.log(oldval);//老路由信息
? ? ? },
? ? ? // 深度观察监听
? ? ? deep: true
? ? }
? }

三、监听路由变化触发方法

methods:{
? getPath(){
? ? console.log(1111)
? }
},
watch:{
? '$route':'getPath'
}

四、全局监听路由

在app.vue的create种加入下面代码，然后进行判断

this.$router.beforeEach((to, from, next) => {
? ? console.log(to);
? ? next();
});

如何在组件中监听路由参数的变化？

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。

因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

那如果我们要在组件中监听路由参数的变化,就只能通过watch (监测变化) $route 对象,或使用 beforeRouteUpdate 的组件内守卫。

方式一: 监听 $route

const User = {
? template: '...',
? watch: {
? ? $route(to, from) {
? ? ? // 对路由变化作出响应...
? ? }
? }
}

方式二：通过组件内的导航守卫

beforeRouteUpdate ,（和created(){}生命周期函数同级别)

const User = {
? template: '...',
? beforeRouteUpdate(to, from, next) {
? ? // react to route changes...
? ? // don't forget to call next()
? }
}

来源：https://blog.csdn.net/weixin_40970987/article/details/82420390