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

更新时间：2025年09月05日 08:49:16 作者：前端小巷子

在单页应用里,路由是连接页面与数据的桥梁,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路由传参方式内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

详解在Vue中如何使用provide与inject
在vue2.0里面provide与inject是以选项式(配置)API的方式在组件中进行使用的,解决的是跨组件(祖孙)间通信的一种方式，本文就来聊聊它们在Vue中具体的使用吧
2023-03-03
解决修复报错Error in render:TypeError:Cannot read&n
这篇文章主要介绍了解决修复报错Error in render:TypeError:Cannot read properties of undefined(reading ‘ipconfig‘)问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2024-03-03
在vue-cli 3中给stylus、sass样式传入共享的全局变量
这篇文章主要介绍了在vue-cli 3中，给stylus、sass样式传入共享的全局变量,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2019-08-08
Vue3中使用富文本编辑器的示例详解
有不少的前端需求都需要使用到富文本编辑器,所以这篇文章主要来和大家介绍一下如何在Vue3项目中使用富文本编辑器,感兴趣的可以了解下
2024-04-04
vue keep-alive 动态删除组件缓存的例子
今天小编就为大家分享一篇vue keep-alive 动态删除组件缓存的例子，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
Vue Vite热更新不起作用的正确解决办法
热更新全称Hot Module Reload,常常在构建工具里面出现,下面这篇文章主要介绍了Vue Vite热更新不起作用的正确解决办法,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-03-03
vue-element-admin开发教程(v4.0.0之前)
本文主要介绍了vue-element-admin开发教程(v4.0.0之前)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2022-04-04
如何在Vue项目中使用vuex
这篇文章主要介绍了如何在Vue项目中使用vuex问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-01-01
Vue项目实现换肤功能的一种方案分析
这篇文章主要介绍了Vue项目实现换肤功能的一种方案分析，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-08-08
Vue+ElementUi实现点击表格链接页面跳转和路由效果
这篇文章主要介绍了Vue+ElementUi实现点击表格中链接进行页面跳转和路由,本文结合实例代码给大家介绍的非常详细,感兴趣的朋友跟随小编一起看看吧
2024-03-03