Vue实现路由传参的四种方式

在单页应用里，路由是连接页面与数据的桥梁。Vue Router 提供了四种方式把「参数」从地址栏、内存甚至编译期注入到组件。理解它们的差异，才能在面试和线上故障中游刃有余。

一、路径参数

把参数写进路径，直观且 SEO 友好。

// router.js
{ path: '/user/:userId', component: User }

访问 /user/42，组件内部：

const route = useRoute()
console.log(route.params.userId) // '42'

• 优点：可收藏、可分享、可被搜索引擎收录。
• 注意：使用正则捕获可限制类型，如 :userId(\\d+) 只接受数字。

二、查询参数

问号后的 key=value 对，天然支持多值与可选。

router.push({ path: '/user', query: { id: 42, tab: 'profile' } })

组件读取：

const route = useRoute()
console.log(route.query.tab) // 'profile'

• 场景：分页、筛选、弹窗状态。
• 陷阱：刷新页面后仍然存在，敏感信息需加密。

三、路由状态参数

state 不会出现在 URL，适合临时或敏感数据。

router.push({ path: '/confirm', state: { orderId: 'xxx' } })

组件读取：

import { useHistoryState } from '@vueuse/core'
console.log(history.state.orderId) // 'xxx'

• 特性：刷新即消失，同源安全；常用于「下一步」导流。
• 限制：SSR 场景下为空，因为服务端没有浏览器 history。

四、路由 Props

把路径或查询自动映射为组件 Props，告别 $route 依赖。

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

组件直接：

<script setup>
const props = defineProps(['id'])
</script>

• 进阶：传入函数可实现自定义映射，如把查询映射为对象。
• 测试：单元测试无需 mock $route，直接传 Props。

总结

路径参数让 URL 会说话，查询参数让 URL 会传表，状态参数让内存做快递，Props 让组件零耦合。掌握四种姿势，Vue 路由从此游刃有余。

到此这篇关于Vue实现路由传参的四种方式的文章就介绍到这了,更多相关Vue路由传参方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！