Vue Router 地址传参跳转同一路由页面不刷新的问题解决

在使用 Vue Router 进行路由跳转时，有时候我们希望通过地址栏传递参数并在页面之间进行通信。然而，在某些情况下，即使地址栏参数发生变化，页面也不会刷新。这个问题通常是由于 Vue Router 的懒加载机制引起的。
为了解决这个问题，你可以采取以下几种方法之一：

1. 使用 query 参数传递参数：将参数作为查询字符串附加到路由地址中。当路由变化时，Vue Router 会重新加载页面。示例代码如下：

   // 跳转到同一路由页面并传递参数
   this.$router.push({ path: '/target-route', query: { id: 123 } });

   在目标页面中，你可以通过 $route.query 访问传递的参数：

   // 在目标页面中访问参数
   console.log(this.$route.query.id); // 输出 123

2. 使用 params 参数传递参数：与 query 参数类似，params 参数也是作为路由地址的一部分传递。不同之处在于，params 参数不会出现在 URL 中，但仍然可以用于页面之间的通信。示例代码如下：

   // 跳转到同一路由页面并传递参数
   this.$router.push({ path: '/target-route', params: { userId: 123 } });

   在目标页面中，你可以通过 $route.params 访问传递的参数：

   // 在目标页面中访问参数
   console.log(this.$route.params.userId); // 输出 123

3. 使用 $forceUpdate 方法强制组件刷新：如果你使用的是 Vue 2.x，可以使用 $forceUpdate 方法强制组件重新渲染。示例代码如下：

   // 在组件中强制刷新
   this.$forceUpdate();

   请注意，这种方法可能会导致性能问题，因为每次组件渲染都需要重新计算和渲染整个组件。因此，建议仅在必要时使用此方法。
   以上是解决 Vue Router 地址传参跳转同一路由页面不刷新问题的一些常见方法。根据具体情况选择适合你的方法来解决这个问题。