Vue 3 中监听路由变化最可靠方式是用 watch 监听 useRoute() 返回的响应式 route 对象的 params 或 query 属性，推荐使用 getter 函数如 () => route.params.id；监听整个 route 需 deep: true；配合 immediate 可实现首屏初始化；须避免直接监听 $route 或 route.params 等非响应式引用。
在 Vue 3 组合式 API 中，监听路由变化最常用、最可靠的方式是用 watch 监听 $route 的响应式属性（如 route.params、route.query 或整个 route 对象），而不是直接监听非响应式的 $route 实例本身。关键在于：必须从 useRoute() 获取的响应式对象出发，并配合正确的监听写法和选项。
监听 route.params 或 route.query（推荐）
这是最轻量、最精准的做法，适用于路径参数或查询参数变化时重新拉取数据等场景。
- 使用
useRoute()获取当前路由对象，它返回的是一个响应式引用（ref） - 用 getter 函数包装要监听的字段，例如
() => route.params.id，确保依赖被正确追踪 - 无需
deep: true，因为params和query本身是浅层响应式对象，其属性变更会触发更新
示例：
const route = useRoute()watch(() => route.params.id, (newId, oldId) => {
if (newId !== oldId) fetchUserData(newId)
})
监听整个 route 对象（需 deep）
当需要响应任意路由字段变化（比如 path、name、hash 等）时，可监听整个 route，但要注意：
-
route是一个只读的响应式代理，直接监听它默认是浅层的——仅当整个对象被替换（如导航到完全不同命名路由）才触发 - 若想捕获
params、query内部值变化，必须显式启用deep: true - 开启
deep有性能开销，不建议在高频路由跳转场景滥用
示例：
watch(route, (to, from) => {console.log('路由对象变化', to.path, from.path)
}, { deep: true })
配合 immediate 实现首屏初始化
很多业务需要页面加载时立即执行一次逻辑（如根据初始 id 请求数据），这时加 immediate: true 就很自然：
- 避免在
onMounted里重复写相同逻辑 - 确保首次进入和后续参数变化都走同一套处理流程
- 注意：
immediate下回调中oldValue是undefined，需做兼容判断
示例：
watch(() => route.query.tab,
(newTab) => {
activeTab.value = newTab || 'home'
},
{ immediate: true }
)
避免常见陷阱
几个高频出错点，直接影响监听是否生效：
- ❌ 错误写法：
watch($route, ...)——$route在 setup 中不可访问，且不是响应式引用 - ❌ 错误写法：
watch(route.params, ...)——route.params是普通对象，不触发响应式追踪；必须用() => route.params.xxx - ❌ 忘记解构或未处理
undefined—— 如监听route.params.id时，初始可能为空，回调里应加空值校验 - ✅ 最佳实践：把路由监听逻辑封装成可复用的组合函数（composable），例如
useRouteParam('id', fetchById)
