在 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 等生命周期钩子也会被跳过——数据自然就不会刷新了。
最简单的解法：给
把 $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 就是最省心的做法。
