Vue Router编程式导航需区分query和params：query用于可选筛选条件，URL显示且刷新不丢；params用于标识性资源路径，需路由预定义动态段，刷新依赖正确配置。
Vue Router 的编程式导航主要通过 this.$router.push() 实现，传参核心在于区分 query 和 params 的使用场景与写法——前者适合可选筛选条件，后者适合标识性资源路径；传参方式不对，参数会丢失或根本拿不到。
用 query 传参：URL 显示、刷新不丢、无需预定义路由
query 参数以 ?key=value 形式拼在 URL 后，适用于搜索关键词、分页页码、排序字段等非核心但需保留的状态。
- 跳转时可直接用
path或name，配合query对象：this.$router.push({ path: '/search', query: { keyword: 'vue', page: 2 } })
或this.$router.push({ name: 'Search', query: { keyword: 'vue', page: 2 } }) - 目标页用
this.$route.query接收：const keyword = this.$route.query.keywordconst page = Number(this.$route.query.page) || 1 - 刷新页面后参数仍在，URL 显示为
/search?keyword=vue&page=2，便于分享和书签保存
用 params 传参：URL 路径嵌入、需路由提前声明、刷新会丢失
params 是动态路径段（如 /user/123 中的 123），代表资源唯一标识，必须在路由配置中用 :id 这类占位符定义。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 只能配合
name使用，不能只写path+params（否则 params 被忽略）：this.$router.push({ name: 'UserDetail', params: { id: 123 } }) - 对应路由配置必须含动态段：
{ path: '/user/:id', name: 'UserDetail', component: UserDetail } - 目标页用
this.$route.params获取：const userId = this.$route.params.id - 刷新页面时，params 不会自动恢复——因为 URL 路径里虽有
/user/123，但 Vue Router 需要路由规则匹配才能解析出 params；若路由配置正确，刷新后仍能拿到；但若误配（比如漏了:id），就会拿不到
常见踩坑点与应对建议
实际开发中容易混淆或出错的地方：
立即学习“前端免费学习笔记（深入）”；
-
params 搭配 path 写法无效：
this.$router.push({ path: '/user', params: { id: 123 } })→ 实际跳转是/user，id 丢了。必须改用name或手写完整 path：this.$router.push({ path: `/user/${123}` }) -
params 刷新失效？先检查路由是否声明了动态段：
如果路由写成{ path: '/user', name: 'User' }，却用params传值，跳转后$route.params为空——因为没定义:id，Router 不知道该从哪截取 -
query 和 params 混用没问题：
this.$router.push({ name: 'Post', params: { id: 456 }, query: { from: 'list', tab: 'comments' } })
生成 URL 如/post/456?from=list&tab=comments，两边参数各自独立获取即可
接收参数的统一写法（Vue 2 / Vue 3 Composition API 兼容）
无论用哪种方式传，接收逻辑一致：
- query：
import { useRoute } from 'vue-router'; const route = useRoute(); console.log(route.query.id); - params：
console.log(route.params.id); - 注意：params 在 setup() 中首次执行时可能为空（尤其 SSR 或服务端跳转），建议加空值判断或用
watch监听route.params变化
