当路由参数变化但组件复用时，需手动监听参数刷新数据：Options API 用 watch 监听 $route.params.id（避免 deep）并 mounted 补调；Composition API 用 watch + useRoute() 监听 route.params.id；或通过 :key="$route.fullPath" 强制重建组件。
当路由参数变化但组件被复用时（比如从 /user/1 跳到 /user/2），Vue 默认不会重新创建组件，created 或 mounted 钩子也不会触发——此时必须手动监听参数变化来刷新数据。
使用 $route 监听器（Options API）
在组件内通过 watch 监听 $route.params 或 $route.query 的变化，适合 Vue 2 和 Vue 3 Options API 项目。
- 监听整个
params对象时，需设置deep: true，否则对象内部属性变化不会触发 - 更推荐监听具体字段（如
$route.params.id），避免不必要的深度比对开销 - 注意：首次进入页面时监听器不会执行，需在
mounted中主动调用一次加载逻辑
使用 watch + useRoute（Composition API）
Vue 3 推荐写法：用 useRoute 获取响应式路由对象，再配合 watch 监听关键参数。
-
useRoute()返回的是只读响应式对象，不能直接解构后监听（会丢失响应性） - 正确写法是监听
route.params.id或route.query.page这样的路径访问表达式 - 可在
watch回调中直接调用fetchData()，无需额外判断是否首次加载
监听 路由全量变化（适用复杂场景）
当需要响应路径、参数、查询、哈希任意一项变化时，可监听 $route 整体或使用 watchRouting 工具函数。
- 监听
$route本身（Options API）或route（Composition API）即可捕获所有路由变更 - 若只需区分“是否跳转到同一路由不同参数”，可用
to.path === from.path做前置判断，避免重复请求 - 注意防抖或取消上一次未完成的请求（例如用
AbortController），防止竞态问题
替代方案：组件级路由复用控制
如果业务允许，也可让 Vue 强制销毁并重建组件，从而自然触发生命周期钩子。
- 给
:key，例如:key="$route.fullPath" - 这样每次路由变化都会生成新 key，组件被完整卸载重挂载，
mounted重新执行 - 适合逻辑简单、无状态保持需求的页面；若需保留表单输入等状态，仍应优先选监听器方案
不复杂但容易忽略的是：监听器本身不会覆盖首次加载，必须手动补一次初始化。把数据加载逻辑抽成独立函数，既能在 mounted 调用，也能在 watch 回调中复用，是最稳妥的做法。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
