打开 Vue 项目，由传路由跳转传参这件事，种方几乎每个页面都会碰到。由传但很多人写了半年，种方还是由传只会一种写法——要么 query 带一串问号，要么 params 刷新就丢。种方问题不在于记不住 API，由传而在于没搞清楚每种方式到底适合什么场景。种方

先说最直白的由传一种：query 传参。它就是种方把参数拼在 URL 后面，像 /user?由传name=zhangsan&age=18。声明式写法是种方 <router-link :to="{ path: '/user', query: { name: 'zhangsan' } }">，编程式就是由传 router.push({ path: '/user', query: { name: 'zhangsan' } })。接收方用 this.$route.query.name 拿值。种方

query 的由传好处是刷新页面参数还在，因为地址栏里明明白白写着。复制链接发给别人，对方打开也能看到同样的内容。做搜索页、筛选列表的时候，我基本都用 query。用户搜了“Vue 教程”，地址栏保留这个关键词，刷新不丢，分享也方便。缺点也明显——参数全暴露，传个 token 或用户 ID 就不太合适。另外参数一多，URL 又长又丑。

再来看 params 传参。它配合动态路由使用，路由配置里得先占好坑：{ path: '/user/:id', component: User }。跳转时 router.push({ name: 'user', params: { id: 123 } })，接收用 this.$route.params.id。注意这里最好用 name 而不是 path，用 path 的话 params 会被忽略——这个坑我踩过，当时排查了半天，最后发现文档里写了一行小字。

params 的优点是 URL 干净，/user/123 比 /user?id=123 看起来舒服。但它有个致命问题：刷新就丢。因为 params 不写在地址栏里（除非你在路由配置中定义了动态段），页面一刷新，内存里的参数就没了。所以 params 适合那些不需要分享、不需要刷新保留的场景，比如从列表页点进详情页，传个临时 ID 做数据请求。如果详情页需要刷新后还能用，那就得把 ID 放到 path 里，而不是 params 对象里。

第三种方式容易被忽略：props 解耦。它不是独立的传参方式，而是对前两种的优化。路由配置里加 props: true，组件就能像普通组件一样用 props 接收参数，不用再写 this.$route.params.id。比如：

{  path: '/user/:id', component: User, props: true }

然后 User 组件里直接 props: ['id'] 就行。这样做的好处是组件和路由解耦，测试的时候不用模拟 $route 对象，直接传 props 就能跑。如果参数是静态的，还可以传对象：props: { name: '默认名' }。我现在的习惯是，只要组件需要从路由拿数据，优先用 props，代码干净不少。

三种方式怎么选？我的判断标准很简单：需要刷新保留、需要分享链接，用 query；URL 要简洁、参数是资源标识（比如 ID），用动态路由 + params；想让组件更独立、更好测试，加 props。别死记哪种“最好”，场景决定用法。

还有个细节：router.push 和 router.replace 的区别。push 会往历史记录里加一条，用户点后退能回到上一页；replace 是替换当前记录，后退会跳过。传参的时候顺手想一下用哪个，体验差别挺大。比如登录成功后跳首页，用 replace 更合适，用户不该后退回登录页。

最后提一句，Vue 3 的 Composition API 里用 useRoute() 拿路由信息，写法变了但逻辑没变。query 还是 query，params 还是 params，该刷新丢的还是丢。搞懂本质，换 API 只是换个写法而已。