关于vue路由监听事件跳转的问题
作者：任性飞翔
这篇文章主要介绍了关于vue路由监听事件跳转的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
vue路由监听事件跳转
1.监听路由触发事件的语法
watch: {
$route: function clearSelectionRow() {
console.log("success");
this.$emit("setSelectionFile", []);
},
}代码实现功能：当本页面路由发生变化的时候，执行回调函数clearSelectionRow()；
2.可能遇到的问题
①$route后接函数，函数可以是现定义的，也可以是在methods方法中已经定义完成的；
②监听watch封装在最底层的组件的时候，注意跳转后该组件是否摧毁重建；如果被摧毁重建，路由监听触发事件将不执行，摧毁重建：一个组件调用两次分别显示，在页面上无区别，但是是同意组件的再次渲染，定义在该组件上的路由变化将监听不到。
解决方法：将路由监听放在一直不变的主页面index.vue上.
③当需要在同一属性下执行多个回调函数的时候，将函数以对象的形式放在数组中
$route: [
function clearSelectionRow() { //回调函数1
this.$emit("setSelectionFile", []);
},
{//回调函数2
handler(route) {
},
],vue路由监听不到怎么办
最近在使用vue项目的时候发现我们使用的watch监听不到$route的变化，查了很多文档最终终于找到解决办法。
方法一
路由包含子路由
{
name: 'home',
component: Home,
path: '/home',
children: [
{
path: 'main',
name: 'main',
component: Main,
},
{
path: 'login',
name: 'login',
component: Login,
},
]
}
在几个子路由之间跳转就能保证监听到路由变化
方法二
监听$route.path对象
watch: {
"$route.path":{
handler(to, from) {
console.log('to:::', to);
console.log('from:::', from);
},
deep: true
}
}如果我们的路由没有子路由，想要实现监听可以使用$route.path进行深度监听，这样也能监听到路由变化了。
方法三
使用vue自带的路由守卫beforeRouteEnter ，beforeRouteUpdate ，beforeRouteLeave
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
},
beforeRouteUpdate (to, from, next) {
},
beforeRouteLeave (to, from, next) {
}据说还能通过设置keep-alive来保证路由被监听到，这个我最近还没用的，有用过的小伙伴可以分享一下。
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。