Vue 3路由push后URL更新但页面不重新渲染的解决方案

在 Vue 3 中使用 router.push 切换含动态参数的路由（如 /checklist/:id/item/:aid）时，若仅参数变化而路径模式不变，组件实例会被复用，导致视图不更新；需通过强制刷新 的 key 来触发重新挂载。

你可能会遇到这样一个场景：从 /checklist/1/item/2 导航到 /checklist/2/item/1，浏览器地址栏的 URL 确实变了，但页面上显示的却还是之前的旧数据。看起来像是卡住了，刷新一下又正常——其实问题不在网络请求，而在 Vue Router 的组件复用机制。

由于这两个路由匹配的是同一个路由记录（比如 name: 'checklistitem'），Vue Router 默认不会销毁已挂载的组件实例，而是直接复用。这样一来，setup() 不会重新执行，onMounted 等生命周期钩子也会被跳过——数据自然就不会刷新了。

最简单的解法：给 加上动态 key

把 $route.fullPath 作为 key 值，每次完整路径（包括所有参数）变化时，key 都会跟着变，Vue 就会强制卸载旧组件、创建新组件，从而触发完整的初始化流程：setup()、onMounted、各种 watch 都会重新跑一遍。这是覆盖所有场景的通用解法，推荐作为默认实践。

注意事项

• 不要用 $route.path（不含查询参数）或 $route.name（不反映参数差异），否则在带 query 的场景下可能失效。
• 避免使用静态 key（如 :key="1"）或非响应式值，那样 key 永远不会变，等于没加。
• 如果组件内部已经写了 watch($route) 来手动响应参数变化，用 key 方案仍然更简洁可靠——不需要额外监听逻辑，而且能确保 props 与 setup 上下文同步刷新。

补充建议：更细粒度的控制

在 ChecklistView.vue 中，还可以通过 defineProps 接收参数（配合 props: true），并结合 onBeforeRouteUpdate 实现参数变更时的自定义响应：

// ChecklistView.vue
import { onBeforeRouteUpdate } from 'vue-router'

onBeforeRouteUpdate((to) => {
  // 当前路由内参数变更时执行（不触发组件销毁重建）
  console.log('Params updated:', to.params.id, to.params.aid)
})

需要注意的是，onBeforeRouteUpdate 只在组件未被销毁时生效；而 :key="$route.fullPath" 是更彻底的方案——它直接重建组件，确保所有状态都重置。如果你的组件有大量内部状态需要保留（比如表单输入），那用 onBeforeRouteUpdate 会更合适；否则，加 key 就是最省心的做法。