vue-路由传参，梳理各种传参情况

原创已于 2026-04-27 15:36:22 修改 · 5.1k 阅读

11 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

vue

于 2023-03-01 15:10:27 首次发布

文章讲述了在使用Vue路由器时，通过query参数传递对象时遇到的问题。当刷新页面时，由于Vue将参数转为字符串，导致对象信息丢失。解决办法是将对象转换为JSON字符串进行传递，在接收端再解析回对象。这种方法虽然能防止数据丢失，但会将对象数据暴露在URL中。

一、普通静态路径 /orderDetail

二、动态路由 /orderDetail/:id

三、表格版总结对比

1、普通静态路径 /orderDetail

2、动态路由 /orderDetail/:id

2、query传参----传递对象

一、普通静态路径 `/orderDetail`

1、使用 name + params

router.push({ name: 'OrderDetail', params: { id: 123 } })

const id = route.params.id      // 123

URL显示	`/orderDetail`（参数不在URL中）
刷新页面	❌ 参数会丢失（变成空对象 `{}`）
页面刷新后	`route.params` 变为 `{}`，拿不到之前传的参数
适用场景	临时数据传递，不需要刷新保持（如弹窗传递、列表页到详情页但详情页不依赖刷新）

2、使用 name + query

router.push({ name: 'OrderDetail', query: { id: 123 })

const id = route.query.id      // '123'（字符串）

URL显示	/orderDetail?id=123&type=online
刷新页面	✅ 参数不会丢失
页面刷新后	`route.query` 仍然保持原值
参数类型	全部转为字符串
适用场景	需要刷新保持参数、可分享链接、SEO友好

注意：如果query传递是是一个对象

query: {
    editData: row
}

强制刷新后打印参数

这就是对象被强制转化为字符串的结果。

原因是vue路由传值会把参数都转换程字符串进行拼接，相当于string

解决方案：传递参数时将参数转化为JSON字符串

editData: JSON.stringify(row)

接收时再转换为对象： console.log(JSON.parse(val));

此时，直接刷新浏览器，url参数不丢失，但是路径会把对象数据全部展示，暴露了参数

3、使用 path + query

router.push({ path: '/orderDetail', query: { id: 123, type: 'online' } })

const id = route.query.id      // '123'
const type = route.query.type  // 'online'

URL显示	/orderDetail?id=123&type=online
刷新页面	✅ 参数不会丢失
与 `name+query` 区别	效果完全相同，只是跳转方式不同
适用场景	同 `name+query`

二、动态路由 `/orderDetail/:id`

1、使用 name + params (标准用法)

// 路由配置
{ name: 'OrderDetail', path: '/orderDetail/:id', component: OrderDetail }

router.push({ name: 'OrderDetail', params: { id: 123, type: 'online' } })

const id = route.params.id      // 123
const type = route.params.type  // 'online'

URL显示	`/orderDetail/123`（只有 `:id` 定义的参数进入URL，额外的 `type` 不在URL中）
刷新页面	✅ `id` 不会丢失（在URL中） ❌ `type` 会丢失（不在URL中）
页面刷新后	`route.params.id` 仍然存在 `route.params.type` 变成 `undefined`
适用场景	核心参数（如ID）需要刷新保持，辅助参数（如来源标记）不需要

2、使用 name + params + query (混合)

router.push({ 
  name: 'OrderDetail', 
  params: { id: 123 }, 
  query: { type: 'online', from: 'list' }
})

const id = route.params.id     // 123
const type = route.query.type  // 'online'
const from = route.query.from  // 'list'

URL显示	/orderDetail/123?type=online&from=list
刷新页面	✅ 所有参数都不会丢失
参数分布	`params` 中的ID在路径中，`query` 参数在查询字符串中
适用场景	既有核心标识ID（需要在路径中），又有筛选/状态参数

3、使用 path + query

router.push({ path: '/orderDetail/123', query: { type: 'online' } })

const id = route.params.id      // 123（从URL路径中解析）
const type = route.query.type   // 'online'

URL显示	/orderDetail/123?type=online
刷新页面	✅ 参数不会丢失
与 name+params+query区别	效果相同，但URL需要手动拼接动态部分
适用场景	可以用，但不如 `name` 方式灵活（改路由路径需要多处修改）

三、表格版总结对比

1、普通静态路径 `/orderDetail`

跳转方式	URL显示	刷新后参数	是否可用
`name` + `params`	`/orderDetail`	❌ 丢失	✅ 可用
`name` + `query`	`/orderDetail?id=123`	✅ 保留	✅ 可用
`path` + `query`	`/orderDetail?id=123`	✅ 保留	✅ 可用
`path` + `params`	-	-	❌ 报错

2、动态路由 `/orderDetail/:id`

跳转方式	URL显示	刷新后参数	是否可用
`name` + `params`（只有id）	`/orderDetail/123`	✅ id保留	✅ 推荐
`name` + `params`（带额外参数）	`/orderDetail/123`	❌ 额外参数丢失	⚠️ 不推荐
`name` + `params` + `query`	`/orderDetail/123?type=online`	✅ 全部保留	✅ 推荐
`path` + `params`（带id）	`/orderDetail/123`	❌ 额外参数丢失	❌ 不推荐
`path` + `query`	`/orderDetail/123?type=online`	✅ 全部保留	⚠️ 可用但不推荐

标签

#vue.js