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`生命周期钩子实现类似功能。

问题描述：

使用vue动态路由（“/route/:id” 形式） 传参的时候，修改页面参数，但是视图仍旧是之前的内容，没有进行刷新，示例如下：

原因分析：

具体原因在vue官方文档：响应路由参数的变化一节中有讲过：

当使用路由参数时，例如从 /user/foo 导航到 /user/bar，原来的组件实例会被复用。因为两个路由都渲染同个组件，比起销毁再创建，复用则显得更加高效。不过，这也意味着组件的生命周期钩子不会再被调用。

复用组件时，想对路由参数的变化作出响应的话，你可以简单地 watch (监测变化) $route 对象

（摘自vue文档）

解决办法：

方法一： watch (监测变化) $route 对象

watch: { '$route' (to, from) { // 监听路由的变化，做你想做的一些事情... // this.init() } },

方法二：使用 vue-router 2.2 中引入的 beforeRouteUpdate 导航守卫：

export default { data () { return { errCode: '', info: {} } }, beforeRouteUpdate (to, from, next) { // 做一些想要做的处理... // this.errCode = to.params.code // this.info = formatErrorMsg(this.errCode) next() // 一定要有next }, // ... }

方法二中需要注意的是，一定要有next()

以上这篇vue动态路由:路由参数改变,视图不更新问题的解决就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持易盾网络。