query用于URL查询参数，表达“怎么看”，刷新保留；params用于路径动态段，表达“是哪个”，需路由配置且刷新易丢失。
Vue Router 中的 query 和 params 是两种常用但定位不同的传参方式。选对方式，比写对代码更重要——它直接影响 URL 结构、刷新行为、SEO 效果和组件响应逻辑。
URL 表现与语义含义
query 参数出现在 ? 后面，例如 /search?q=vue&page=2；它表达的是“怎么看”，比如筛选、排序、分页等可选操作，不改变当前资源本质。
params 参数嵌在 路径中，例如 /user/123 或 /post/:slug；它表达的是“是哪个”，代表具体资源的唯一标识，属于路由定义的一部分。
- params 必须在路由配置中声明动态段，如
path: '/user/:id' - query 不需要提前配置，随时可加任意键值对
- params 更贴近 RESTful 设计风格，query 更接近传统 GET 请求语义
传参与取值的写法要求
query 可用 path 或 name 触发跳转，都支持传 query 对象：
立即学习“前端免费学习笔记（深入）”；
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
this.$router.push({ path: '/list', query: { type: 'news' } })this.$router.push({ name: 'List', query: { type: 'news' } })- 接收统一用
this.$route.query.type
params 必须配合 name 使用（或完整 path 字符串），且不能单独靠 path + params：
- ✅ 正确：
this.$router.push({ name: 'User', params: { id: 123 } }) - ❌ 失效：
this.$router.push({ path: '/user', params: { id: 123 } })（参数不会被注入） - 接收统一用
this.$route.params.id
刷新行为与数据持久性
query 参数会完整保留在 URL 中，页面刷新后仍可通过 $route.query 获取，天然适合临时状态管理。
params 参数在刷新时会丢失——因为浏览器只发送 URL 路径部分，而 Vue Router 需要根据路径匹配动态段来还原 params；若路径中没写明参数（如访问 /user 而非 /user/123），params 就为空。
- 解决 params 刷新丢失：确保路由 path 已定义动态段（如
/user/:id），且用户访问的 URL 包含该段 - 不建议强行用 localStorage 存 params 来“补救”，这会破坏路由语义和可分享性
- 若需持久化非资源类参数（如 tab 激活态），优先用 query
组件复用与参数监听
当从 /user/1 跳到 /user/2 时，组件实例会被复用，created / mounted 不会再次执行。
- 用
watch: { '$route': 'fetchData' }监听整个路由对象变化（Vue 2） - Vue 3 推荐使用
onBeforeRouteUpdate导航守卫，精准响应同路由下的参数变更 - 避免滥用
:key="$route.fullPath"强制重渲染，影响性能且掩盖设计问题
不复杂但容易忽略：params 是路径的骨骼，query 是 URL 的呼吸。用 params 标识资源，用 query 控制视图——理清这个分工，路由传参就自然清晰了。
