Vue 路由组件传参的 8 种方式
我们在开发单页面应用时,有时需要进入某个路由后基于参数从服务器获取数据,那么我们首先要获取路由传递过来的参数,从而完成服务器请求,所以,我们需要了解路由传参的几种方式,以下方式同 vue-router@4
。
编程式路由传参
除了使用
<router-link>
创建 a 标签来定义导航链接,我们还可以借助 router 的实例方法,通过编写代码来实现。
1. 通过 params
传递
路由配置
路径参数 用冒号
:
表示。
router.push()
方法的参数可以是一个字符串路径,或者一个描述地址的对象。
注意,如果提供了 path
,params
会被忽略:
组件获取数据
当一个路由被匹配时,它的 params 的值将在每个组件中以
this.$route.params
的形式暴露出来。
2. 通过 query
传递
这种情况下 query
(查询参数)传递的参数会显示在 url 后面,如:/details/001?kind=car
。
路由配置
使用 query
时,以下三种方式都是可行的:
组件获取数据
组件通过 $route.query
获取:
要对同一个组件中参数的变化做出响应的话,你可以简单地 watch
$route
对象上的任意属性,在这个场景中,就是$route.query
。
3. 通过 hash
传递
通过此方式,url 路径中带有 hash
,例如:/details/001#car
。
路由配置
使用 hash
时,以下三种方式都是可行的(同 query
):
组件获取数据
组件通过 $route.hash.slice(1)
获取:
通过 props 进行传递
在组件中使用
$route
会与路由紧密耦合,这限制了组件的灵活性,因为它只能用于特定的 URL。虽然这不一定是件坏事,
以解耦的方式使用 props
进行参数传递,主要是在路由配置中进行操作。
1. 布尔模式
当 props
设置为 true
时,route.params
将被设置为组件的 props。
例如下面的代码是通过 $route
的方式获取动态字段 id
:
将上面的代码替换成 props
的形式,如下:
注意:对于有命名视图的路由,你必须为每个命名视图定义 props
配置:
2. 对象模式
当 props
是一个对象时,它将原样设置为组件 props。当 props 是静态的时候很有用。
路由配置
组件中获取数据
<Hello />
组件默认显示 Hello Vue,但路由配置了 props
对象,当路由跳转到 /hello
时,会显示传递过来的 name
, 页面会显示为 Hello World。
3. 函数模式
可以创建一个返回 props 的函数。这允许你将参数转换为其他类型,将静态值与基于路由的值相结合等等。
路由配置
使用函数模式时,返回 props 的函数接受的参数为路由记录 route
。
组件获取数据
当 URL 为 /hello?say=World
时, 将传递 {name: 'World!'}
作为 props 传给 Hello
组件。
此时页面将渲染:
注意:请尽可能保持 props
函数为无状态的,因为它只会在路由发生变化时起作用。如果你需要状态来定义 props,请使用包装组件,这样 vue 才可以对状态变化做出反应。
其他方式
1. 通过 Vuex 进行传递
2. 通过前端本地存储等方式
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识(上)
· 浏览器原生「磁吸」效果!Anchor Positioning 锚点定位神器解析
· 没有源码,如何修改代码逻辑?
· 全程不用写代码,我用AI程序员写了一个飞机大战
· MongoDB 8.0这个新功能碉堡了,比商业数据库还牛
· 记一次.NET内存居高不下排查解决与启示
· 白话解读 Dapr 1.15:你的「微服务管家」又秀新绝活了
· DeepSeek 开源周回顾「GitHub 热点速览」