vue路由，解决同一路由页面多次触发不刷新页面【vue开发】

 

vue路由的机制是这样的：

不同的路由vue会刷新并跳转到相应路由，但如果是下一个点击触发的还是当前路由则当前路由页面不会被刷新

 

 

要解决的问题是：

很多时候是通过地址传参触发同一个页面就没法加载不同的数据

 

解决思路：

虽然下一个点击还是当前路由不会刷新当前路由，但我们知道$route路由数据此时是发生了变化的，比如$route里传递的参数信息会随着每次不同的点击发生变化，那么我们利用这一点使用vue的watch去检测这样的变化然后再重新请求数据请求接口即得到想要的数据

 

 

... ...
 
watch: {
　　// 利用watch方法检测路由变化：
　　'$route': function (to, from) {
　　　　// 拿到目标参数 to.query.id 去再次请求数据接口
　　　　this.loadPageData(to.query.id)
　　}
}
... ...

 

 

扩展知识：

$route是什么？

$route理解为当前正在跳转的路由对象，可以从两个形参to与from得到目标路由与上一个路由相关数据对象（传递的参数 path等）