带参数的动态路由切换时默认复用组件，状态不自动重置；需通过watch监听路由参数变化或使用路由守卫手动重置与参数强绑定的状态。
带参数的动态路由（比如 /user/:id）在切换时是否重置状态，关键看组件是否被复用、参数是否变化，以及你是否主动干预。它不是“自动重置”或“自动保留”，而是由 Vue Router 的复用机制和开发者控制逻辑共同决定。
组件是否复用取决于 route 的 name 和 path 是否相同
Vue Router 默认复用同一组件实例——只要目标路由和当前路由使用的是同一个组件（即 component 相同），且 name 一致，就不会销毁重建。这意味着：
- 访问
/user/1→/user/2：组件不销毁，data、ref、滚动位置等都还在，但参数变了； - 访问
/user/1→/post/3：组件销毁重建，状态自然清空； - 即使路径不同（如
/user/1?tab=info→/user/1?tab=setting），只要name和path不变，组件仍复用。
手动触发状态重置的常用方式
当需要“参数变了，但状态要清空”（例如用户详情页切换 ID 时重置表单、清空加载状态），推荐在组件内监听路由变化并响应：
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 用
watch监听$route.params.id（Vue 2）或useRoute().params.id（Vue 3），检测到变化就调用重置方法； - 在
beforeRouteUpdate（Vue 2）或onBeforeRouteUpdate（Vue 3）守卫中执行清理逻辑，比 watch 更精准、更早触发； - 避免在
created/mounted中一次性初始化——它们只在首次进入时执行，对复用场景无效。
区分“保留”与“重置”的实际策略
不是所有状态都需要重置。应按字段粒度判断：
立即学习“前端免费学习笔记（深入）”；
-
需重置的：与当前参数强绑定的数据，如
userInfo、loading、form表单值； - 可保留的：与路由无关的 UI 状态，如折叠面板展开态、表格列宽、分页页码（除非业务要求每次进新详情都从第 1 页开始）；
- 若用 Pinia 管理跨页面共享状态（如全局搜索历史），它本身不随路由切换自动清空，需显式调用
store.$reset()或按模块设计清除逻辑。
配合 keep-alive 的注意事项
如果包裹了 <keep-alive>，组件实例会缓存，activated/deactivated 钩子比 mounted/unmounted 更适合处理参数切换：
- 在
activated中检查route.params.id是否变化，变化则重置； - 避免在
deactivated中保存状态——此时参数可能已变，容易存错； -
include白名单里不要无差别缓存所有动态路由组件，尤其含大量数据或第三方库（如 ECharts 实例）的，易引发内存问题。
