vue router 默认复用组件导致路由参数变化时页面数据不更新，需精准监听特定参数（如$route.params.id或$route.query.page）并配合immediate: true确保首屏加载，vue 3推荐useroute+函数式watch，高频变动时应防抖或取消请求。
路由参数变了，页面数据没更新，是因为 Vue Router 默认复用组件——不销毁、不重走生命周期。想让数据跟着动起来，核心不是刷新页面，而是监听变化并主动拉新数据。关键在“精准监听”和“首次补调”。
只监听你要的参数，别盯整个 $route
监听 $route 整体容易误触发（比如 hash 改变、query 小幅变动），也容易因对象引用未变导致失效。应聚焦具体字段：
- 动态路径参数（如
/user/:id）→ 监听'$route.params.id' - 查询参数（如
/list?page=2&sort=name）→ 监听'$route.query.page'或组合判断 - 多个 query 同时影响数据 → 用计算属性聚合，或手动比对关键字段是否变化
Options API 必须加 immediate: true 补首屏
缓存组件首次进入时，watch 不会自动执行，必须靠 immediate: true 补上首屏加载逻辑：
在SEO发布前，从路由清单生成XML网站地图和robots.txt
下载
当代理已经知道网站路由或内容URL，并且在启动前需要有效的sitemap XML、sitemap索引或robots.txt引用时，请使用sitemap。这是一个发布构件技能，而不是爬虫或SEO平台。
- 把
fetchData抽成独立方法，既能在 watch 里调，也能在mounted中手动调一次 - 逻辑更清晰、复用性更强
Composition API 推荐 useRoute + 函数式 watch
Vue 3 中，用 useRoute() 获取响应式路由对象，再配合 watch 是最稳妥的方式：
- 必须保持函数形式
() => route.params.id，不能提前解构route.params，否则丢失响应性 - 支持
{ immediate: true }，确保首次加载即触发 - 适合 keep-alive 场景，是唯一稳定捕获所有参数变化的方式
高频变化时要防抖或取消请求
当 query 频繁变动（比如搜索框实时输入），直接监听可能引发多次请求：
- 用
lodash.debounce包裹请求函数 - 用
AbortController取消上一次未完成的请求 - 结合路由
meta字段做开关，比如只在meta.reloadOnParamChange === true时才刷新
