在做前端项目时，页面跳转几乎是家常便饭。比如从商品列表点进详情页，总得告诉详情页“我要看的是哪个商品”吧？这时候就得靠 Vue 路由传参来搞定。
通过 params 传参
这种方式适合传递一些关键标识，比如用户 ID 或订单编号。需要先在路由配置里定义参数名：
const routes = [
{
path: '/user/:id',
component: UserDetail
}
]跳转时可以直接在 router-link 的 to 属性中写：
<router-link :to="{ name: 'user', params: { id: 123 } }">查看用户</router-link>或者用编程式导航：
this.$router.push({ name: 'user', params: { id: 123 }})在目标页面通过 this.$route.params.id 就能拿到值。
利用 query 传参
这就像传统 URL 带的 ? 后面那一串参数。比如搜索页筛选条件多的时候特别适用。
跳转写法：
this.$router.push({ path: '/search', query: { keyword: '手机', type: '5g' }})生成的地址会是 /search?keyword=手机&type=5g，在目标页用 this.$route.query.keyword 取值就行。
用 props 解耦路由和组件
如果直接在组件里操作 $route，测试起来不方便，也显得耦合度高。可以开启路由的 props 模式：
{
path: '/news/:id',
component: NewsDetail,
props: true
}然后组件内部就可以像接收普通 props 一样使用：
props: ['id'],
mounted() {
console.log(this.id); // 直接用
}这样组件更干净，也更容易复用。
动态拼接路径传参（小心坑）
有时候图省事会这么写：
this.$router.push(`/article/${id}?from=home`)但这样 query 参数可能解析不正确。建议统一用对象写法，避免出错。
刷新后数据丢了怎么办？
用 params 传的参数，刷新页面后依然存在；而 query 其实也保留在 URL 里，所以也不会丢。但如果用了 state 传参（比如 push({ ..., state: { data } })），刷新就没了，因为浏览器不保留这个。
如果非要传复杂数据，建议转成字符串放 query 里，或者用 localStorage 配合处理。
实际场景小贴士
比如做个电商站点，首页点某个促销 banner 进活动页，可以用 query 带上活动编号和来源渠道，方便后续埋点统计。又比如后台管理系统，编辑用户信息时用 params 传 ID，安全又直观。
不同方式各有适用场景，选对了代码更清晰，后期维护也轻松。