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踩坑记之npm install报错问题解决总结
当你跑起一个项目的时候,第一步需要先安装依赖npm install,下面这篇文章主要给大家介绍了关于vue踩坑之npm install报错问题解决的相关资料,需要的朋友可以参考下
2022-06-06
vue使用CSS变量详解
文章讲解了如何在Vue项目中使用CSS变量,包括动态计算值和根据条件计算属性,通过示例展示了如何使用CSS变量来实现动画效果和动态样式
2025-12-12
:visible.sync 的作用详解
我们在前端开发中经常看到:visible.sync这种修饰符，很多人不知道这是干什么的，在使用ElementUI的时候，里面有个弹窗el-dialog组件的时候会有用到:visible.sync，今天小编带领大家学习下:visible.sync 的作用，感兴趣的朋友一起看看吧
2022-11-11
解决vue多个路由共用一个页面的问题
下面小编就为大家分享一篇解决vue多个路由共用一个页面的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-03-03
Vite打包时去除console的方法实现
Vite打包项目时,需要去除开发时加入的console、debugger调试信息,本文主要介绍了Vite打包时去除console的方法实现,具有一定的参考价值,感兴趣的可以了解一下
2024-08-08
vue配置生产环境.env.production与测试环境.env.development
这篇文章主要介绍了vue配置生产环境.env.production与测试环境.env.development方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
2023-10-10
Vue ECharts简易实现雷达图
这篇文章主要介绍了基于Vue ECharts简易实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-12-12
Vue3源码分析侦听器watch的实现原理
watch 的本质就是观测一个响应式数据，当数据发生变化时通知并执行相应的回调函数。watch的实现利用了effect 和 options.scheduler 选项，这篇文章主要介绍了Vue3源码分析侦听器watch的实现原理,需要的朋友可以参考下
2022-08-08
vue实现调取手机摄像头和相册功能
这篇文章主要为大家详细介绍了vue实现调取手机摄像头和相册功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2021-09-09
vuejs事件中心管理组件间的通信详解
这篇文章主要为大家详细介绍了vuejs事件中心管理组件间的通信，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08