Vue Router动态参数变化时组件不重载，需用watch监听$route或beforeRouteUpdate守卫响应；推荐watch结合meta控制刷新逻辑，Vue 3中可用useRoute和onBeforeRouteUpdate简化实现。

当 Vue Router 的动态路由参数（比如 /user/:id）发生变化，但复用同一组件时，默认不会触发组件的重新创建或 created/mounted 钩子——这是 Vue Router 的优化机制。如果你依赖参数变化来刷新数据，就得主动监听路由变更。

用 watch 监听 $route 对象

在组件内通过 watch 观察 $route 的变化是最直接的方式，尤其适合参数（params）、查询（query）或哈希（hash）变动：

• 监听整个 $route：适用于任意字段变化都需响应
• 监听 $route.params.id：精准响应 ID 类参数变更，避免无谓触发
• 注意使用 immediate: true，确保组件首次加载时也能执行逻辑（比如初始化请求）

配合 beforeRouteUpdate 导航守卫（可选）

如果只关心当前组件内路由复用时的更新，beforeRouteUpdate 是更语义化的选择，它只在组件复用、路由改变时调用：

• 写在组件选项中，接收 to、from 和 next 参数
• 适合做数据重载、滚动重置、状态清理等操作
• 必须调用 next()，否则导航会挂起

推荐组合：watch + 路由元信息控制

有些页面需要“仅参数变才刷新”，有些则“参数变且 query 变才刷新”。可通过 meta 字段标记路由配置，再在 watch 中判断：

• 在路由定义里加 meta: { reloadOnParamChange: true }
• watch 中检查 to.meta.reloadOnParamChange 和 from.params.id !== to.params.id
• 避免所有页面一刀切，提升性能和体验

Vue 3 setup 语法糖中的写法

在 <script setup></script> 中，用 watch 或 onBeforeRouteUpdate 更简洁：

• 导入 useRoute 获取当前路由对象，用 watch 监听其 params 或 query
• 导入 onBeforeRouteUpdate 替代选项式守卫，无需 next（Composition API 自动处理）
• 记得用 toRef(route, 'params') 或 computed(() => route.params.id) 提升响应式稳定性