在 Vue 3 中使用 router.push 导航时，若仅参数（params）变化而路径结构不变（如 /checklist/:id/item/:aid），组件实例会被复用，导致 setup() 或 onMounted 不会重新执行，页面数据不更新。解决方法是强制路由视图重新渲染。

在 vue 3 中使用 `router.push` 导航时，若仅参数（params）变化而路径结构不变（如 `/checklist/:id/item/:aid`），组件实例会被复用，导致 `setup()` 或 `onmounted` 不会重新执行，页面数据不更新。解决方法是强制路由视图重新渲染。

当从 /checklist/1/item/2 跳转到 /checklist/2/item/1 时，由于两条路由匹配同一命名路由 checklistitem 且路径模式完全相同（/checklist/:id/item/:aid），Vue Router 默认复用已挂载的组件实例——这是性能优化机制，但也会导致 props 更新后组件未响应式重载数据。

根本原因：
Vue Router 在参数变更但路由记录（route record）相同时，不会触发组件销毁与重建，watch 监听 $route.params 虽然生效，但若业务逻辑仅写在 setup() 或 onMounted 中，则不会自动执行。

推荐解决方案：为 <router-view> 添加唯一 key，强制 Vue 卸载并重建组件：

<!-- App.vue 或布局组件中 -->
<router-view :key="$route.fullPath" />

✅ :key="$route.fullPath" 确保每次完整路径变化（包括动态参数）都生成新 key，从而触发组件重新初始化。
⚠️ 注意：不要使用 $route.name 或 $route.params 作为 key，因其可能在不同参数下值相同（如嵌套路由中 name 不变），而 $route.fullPath 具有唯一性。

替代方案（按优先级排序）：

• ✅ 首选：<router-view :key="$route.fullPath" /> —— 简洁、通用、无副作用；

  立即学习“前端免费学习笔记（深入）”；

  

  vue-component-analyzer

  递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

  下载

• ✅ 监听路由变化：在组件内使用 watch 监听 $route.params 并手动刷新数据：

  import { watch } from 'vue'
  import { useRoute } from 'vue-router'
  
  export default {
    setup() {
      const route = useRoute()
      const { id, aid } = route.params
  
      // 初始加载逻辑
      loadData(id, aid)
  
      // 监听参数变化
      watch(
        () => [route.params.id, route.params.aid],
        ([newId, newAid]) => {
          loadData(newId, newAid)
        },
        { immediate: false }
      )
  
      return { /* ... */ }
    }
  }

• ❌ 避免 router.replace() 或 router.go(0) —— 会造成不必要的历史栈污染或闪烁。

额外提示：

• 若启用了 props: true，确保组件正确接收 id 和 aid 作为 props，并在 props 变更时响应（例如通过 watch 或 computed）；
• 在 setup() 中直接解构 useRoute().params 是静态快照，不会响应变化，务必结合 watch 使用；
• 开发时可通过浏览器 Vue Devtools 查看组件是否被复用（观察组件实例 ID 是否改变）来快速定位问题。

此方案兼容 Vue 3.2+ 及 Vue Router 4.x，无需修改路由配置或升级依赖，是生产环境推荐的标准实践。