关于vue-router 路径发生改变但页面并没有发生变化

最新推荐文章于 2025-08-26 14:01:37 发布

原创最新推荐文章于 2025-08-26 14:01:37 发布 · 1w 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue #前端

本文解决了一个Vue项目中，当使用router.push更改路径时，页面数据未及时更新的问题。通过在组件中添加$route监听器并调用fetchData方法，确保了页面数据随路由变化而更新。

问题描述：
假如当前路径为： http://localhost:8080/detail?goodsId=5e6de2ad3f9b1668a0f37e88
在这里插入图片描述
需要跳转路径为： localhost:8080/detail?goodsId=5e6de2573f9b1668a0f37e87

通过点击事件 this.router.push 发现虽然路径发生改变但是页面并没有发生变化(刷新页面会改变)，此时问题为虽然当前路径发生变化，但是detail中的数据并没有发生改变。
只需要在显示页面对应的组组件中添加 watch 监听 $route 对应函数进行重新获取当前 vue-router 传的参数对应的路径：
watch: { "$route": 'fetchData' },
methods: { "发送请求获取数据代码" }
即可解决问题
vue-router官网案例