Vue路由监听事件后如何实现跳转到特定页面？

本文共计674个文字，预计阅读时间需要3分钟。

目录 + Vue路由监听事件跳转 + 1. 监听路由触发生事件语法 + 2. 可能遇到的问题 + Vue路由监听不到怎么办 + 方法一 + 方法二 + 方法三 + Vue路由监听事件跳转 + 1. 监听路由触发生事件语法 + watch: { $route }

目录

• vue路由监听事件跳转
• 1.监听路由触发事件的语法
• 2.可能遇到的问题
• 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来保证路由被监听到，这个我最近还没用的，有用过的小伙伴可以分享一下。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。