Vue动态路由参数变更后视图不刷新，如何解决？

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

问题描述：使用vue动态路由（/route/:id 形式）传递参数时，修改页面参数，但视图内容仍然是之前的，没有进行刷新。

原因分析：整体原因在于vue路由的懒加载机制导致。

具体原因如下：

1. 路由懒加载：Vue路由默认采用懒加载的方式加载路由组件，即路由组件在首次访问时才会加载。这导致在修改页面参数后，由于组件尚未加载，所以视图内容仍然是之前的。

2. 路由参数未变化：虽然页面参数已修改，但路由参数（即URL中的`:id`）并未发生变化，因此Vue路由不会重新加载对应的路由组件。

解决方案：

1. 修改路由参数：在修改页面参数后，手动修改路由参数，触发路由重新加载。例如，使用`this.$router.push({ params: { id: newId } })`。

2. 使用watch监听路由参数：在组件内部使用`watch`监听路由参数的变化，当参数发生变化时，手动触发路由重新加载。

示例代码：

javascriptexport default { watch: { $route(to, from) { // 当路由参数发生变化时，手动触发路由重新加载 if (to.params.id !==from.params.id) { this.$router.push({ params: { id: to.params.id } }); } } }}

注意：以上方案仅适用于Vue 2.x版本。在Vue 3.x版本中，可以使用`onBeforeRouteUpdate`生命周期钩子实现类似功能。