【Web】Vue 3 中 router 参数传递的 4 种方式

Vue 3 + Vue Router 4 中可行的参数传递方式（含刷新保留特性），

---

🌈 Vue 3 中 router 参数传递的 4 种方式

---

✅ ① query 参数方式（推荐）

语法：

router.push({
  path: '/detail',
  query: { id: 1, name: 'apple' }
})

或：

router.push({
  name: 'Detail',
  query: { id: 1, name: 'apple' }
})

目标页接收：

const route = useRoute()
console.log(route.query.id)   // "1"
console.log(route.query.name) // "apple"

刷新后：✅ 保留
URL 示例： /detail?id=1&name=apple

优点：

• 刷新不丢失
• 可分享链接
• 简洁、通用

缺点：

• 参数暴露在 URL 中（不适合敏感数据）

---

✅ ② params 参数方式（依赖命名路由）

路由配置：

{
  path: '/detail/:id',
  name: 'Detail',
  component: Detail
}

跳转方式：

router.push({ name: 'Detail', params: { id: 1 } })

目标页接收：

const route = useRoute()
console.log(route.params.id) // "1"

刷新后：❌ 丢失（因为不在 URL 中）
除非写入 path 中。

---

✅ ③ 直接使用 path 拼接参数

这是一种「path 直传」方式，本质上属于 params 的具体写法。

路由配置：

{
  path: '/detail/:id',
  name: 'Detail',
  component: Detail
}

跳转：

router.push(`/detail/${id}`)

目标页接收：

const route = useRoute()
console.log(route.params.id)

刷新后：✅ 保留
因为 id 直接写进了路径，属于 URL 的一部分。

优点：

• 参数体现在 URL 中（但不像 query 那样显式键值）
• 刷新不丢失
• 简洁

缺点：

• 只能传简单类型参数（数字、字符串）
• 不能直接传多个复杂对象

例如：

/detail/1

想传多个字段只能：

/detail/1/2/3

或：

/detail/1?type=abc

这时 query 与 path 混用更实用。

---

✅ ④ localStorage / sessionStorage 持久化传递

适合需要跨页面传递对象、列表或敏感数据。

跳转前保存：

localStorage.setItem('detailData', JSON.stringify({ id: 1, name: 'apple' }))
router.push('/detail')

目标页读取：

const info = JSON.parse(localStorage.getItem('detailData'))

刷新后：✅ 保留

优点：

• 可保存复杂对象
• 不暴露在 URL

缺点：

• 需手动清除，否则数据残留
• 不适合需要分享链接的场景

---

📊 总结对比表

方式	是否刷新保留	是否暴露在URL	是否可传对象	是否需命名路由	常见场景
query	✅ 是	✅ 是	❌ 否	❌ 否	普通参数传递
params	❌ 否	❌ 否	❌ 否	✅ 是	临时参数传递
path	✅ 是	✅ 是	❌ 否	❌ 否	简单 ID 传递
localStorage / sessionStorage	✅ 是	❌ 否	✅ 是	❌ 否	复杂/敏感数据

---

🔧 实战建议

需求	推荐方式
普通参数传递且希望刷新保留	✅ query
只传一个简单 ID，希望 URL 美观	✅ path
临时跳转，参数不需要刷新保留	✅ params
传递复杂对象、不想暴露 URL	✅ localStorage / sessionStorage