Vue基础教程（169）Vue Router之路由传参：Vue Router传参指南：三种让你代码不再“单身”的传参姿势！

🎯 第一章：为啥要学路由传参？你的组件在喊“寂寞”！

想象一下这个场景：你吭哧吭哧写了个商品列表页，用户点击某个商品后，需要跳转到详情页展示具体信息。这时候问题来了——详情页怎么知道用户点击的是哪个商品？

难道要让详情页自己重新调接口？太浪费！
让用户重新输入商品ID？太反人类！
这时候，路由传参就像个热心红娘，捧着商品ID说：“别急，我帮你带过去！”

举个真实案例：
小红书APP的笔记列表点击后，详情页能立即显示对应内容，就是靠路由把笔记ID“捎”过去的。没有这个传递过程，详情页就只能对着空页面发呆。

所以学会路由传参，本质上是在教你的组件如何“交朋友”，让数据在不同页面间顺畅流动，这才是现代SPA（单页应用）的灵魂所在！

---

🔍 第二章：三大传参姿势，总有一款适合你！

🅰️ 姿势一：query传参——像寄明信片一样简单

特点：参数会显示在URL中，形如 ?id=123&name=vue，刷新页面参数不丢失。

适用场景：

• 需要分享或收藏的页面
• 非敏感数据传递
• 需要保留浏览历史的场景

代码示例：

// 传递参数
this.$router.push({
  path: '/detail',
  query: {
    id: 123,
    name: 'Vue入门教程'
  }
})

// 接收参数
export default {
  mounted() {
    // 页面显示：商品ID：123，商品名称：Vue入门教程
    console.log('商品ID：', this.$route.query.id)
    console.log('商品名称：', this.$route.query.name)
  }
}

实际效果：浏览器地址栏显示 /detail?id=123&name=Vue入门教程

优点：简单直接，URL就是参数说明书
缺点：参数长度有限制，敏感信息不宜用

💡 小贴士：query就像给参数办了“身份证”，谁都能看见，所以密码、token这些“隐私”千万别用它传！

🅱️ 姿势二：params传参——像说悄悄话需要默契

特点：参数不会显示在URL的?后面，但需要先在路由表中定义好参数位置。

适用场景：

• 传递敏感数据（配合路由守卫）
• URL需要保持简洁美观
• RESTful风格路径

代码示例