大家好,都吃了吗?我是Kaiqisan,是一个不善言辞的羞射男孩,之前尝试在vue中监听路由变化,发现在vue中无法使用window.location来监听,于是另外找了一种方法。
这个检测不会去检测域名,端口,协议的变化,只会检测端口后面的内容的变化,检测路由的值和参数的值.
'$route': {
handler(val) {
console.log(val);
},
deep: true
// immediate: true
},
在vue
中去监听$route
就可以了,这里面包含了端口号后面的所有信息。
每一次跳转路由都会监听到路由的变化(甚至可以监听锚的变化和参数的变化),记得添加深度监听(其实在watch里面,待监听参数命名这里如果使用字符串—(’$route’)—的话就可以直接进入深度监听)
PS:如果您只是想要监听路由 单一部分 的变化的话,建议把监听对象写得更加详细一些,比如…
'$route.path'(val) {
// ........
}
'$route.query'(val) {
// ........
}
虽然还是深度监听,但是性能会大有提高。
最后测试的部分就交给大家了!
总结
建议把这个监听方法放在一个所有页面都会使用的公共组件上面,这样就可以常驻地监听而不会因为组件的切换而导致监听的失效。