vue3router.push不触发刷新

### Vue 3 中 `$router.push` 不触发组件更新的原因

在 Vue 3 和 Vue Router 中，当使用 `router.push` 方法向同一个路由路径推送带有不同查询参数的对象时，默认情况下不会触发组件的重新渲染。这是由于 Vue Router 主要依据路径 (`path`) 和路由参数 (`params`) 判断路由是否发生变化，而忽略了查询参数 (`query`) 的变化[^2]。

### 解决方案

#### 方案一：监听 `$route.query` 变化

通过侦听器来响应查询参数的变化可以实现在相同路径下切换不同的查询条件时也能触发相应的逻辑处理：

watch(
  () => route.query,
  (newQuery, oldQuery) => {
    // 执行必要的操作，比如获取新的数据
    fetchData(newQuery);
  },
  { immediate: true }
);

此方式适用于仅需根据查询参数调整视图展示而不涉及整个页面重载的情况。

#### 方案二：强制刷新当前组件

如果确实需要完全重新加载组件，则可以在定义路由配置项时设置 `key` 属性为完整的 URL 或者其他唯一标识符，从而使得即使在同一路径上也会因为键值的不同而导致旧实例被销毁并创建新实例:

<template>
  <RouterView :key="$route.fullPath"/>
</template>

这种方法能够确保每次访问即使是相同的路径加上不同的查询字符串也都会得到全新的组件实例[^1]。

#### 方案三：利用编程式导航完成更复杂的控制需求

对于某些特定场景可能还需要更加精细的操作，这时就可以考虑采用编程式的导航方法，在调用 `router.push()` 后立即跟随一次 `nextTick()` 来延迟执行后续代码直到 DOM 更新完毕后再继续流程；或者是捕获其返回的 Promise 对象来进行链式调用来管理异步行为[^5]:

await nextTick();
// or
router.push('/some/path').then(() => {
  // do something after navigation completes
});

以上几种策略可以根据实际项目的需求灵活选用或组合应用以达到最佳效果。