![1a3d5040d2e65174e295142401353708.png](https://i-blog.csdnimg.cn/blog_migrate/e7d334cfbcb05c5449d1ae55e07396d7.jpeg)
如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据。由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据。
![a49631d27ed8a450537e1fc8b3a2f172.png](https://i-blog.csdnimg.cn/blog_migrate/37efbb1655b2352589b655c2970c93aa.jpeg)
解决方案:
右侧的页面中 script代码块添加:watch模块,如下代码:
... ...
mounted : function() {
this.loadData();
},
watch: {
//监听相同路由下参数变化的时候,从而实现异步刷新
'$route'(to,from) {
this.loadData();
},
},
methods: {
loadData() {
let varCode = this.$route.query.varCode;
this.api.service
.gets({
varCode: varCode
})
.then(res => {
console.log(res)
})
},
... ...