Vue Router学习(八)——路由组件传参

前言

上节介绍了命名视图,梳理了一下视图、组件、路由三者之间的关系。开发过程中经常有组件之间的交互,这时候可以使用路由组件进行传参,本节就来介绍一下路由组件传参。

路由组件传参

提起路由传参我们首先想到的应该是params与query两种方式传参,这两种传参方式都需要调用$route的对应方法,而且传递的参数也只能在匹配的组件使用,如果我们想要一个组件能够匹配不同的路由就可以使用props进行路由组件传参。

props

props是路由配置项的一个属性,表示组件传参,对应的ts类型如下:

注意上面的注释,该属性会配合着router-view使用。继续看下_RouteRecordProps代表的类型:

从图上我们可以清晰看到,props类型有三种:

  • 布尔值
  • 对象
  • 函数
    三个类型对应三种模式用法:
  • 布尔模式,当props为true时,路由上的params会被当成组件的props。写个简单的案例,在路由上添加id参数,然后在组件定义一个名称为id的porps参数。
js 复制代码
const routes: RouteRecordRaw[] = [
{
path: '/home',
name: 'home',
component: () => import('@/components/Home.vue'),
props: true,
}
];

在home获取id参数就是url路由上面的id参数。上节我们介绍了命名视图,如果我们想要给多个命名视图设置porps时,只需要对应视图的名称。

js 复制代码
components: {
default: Table,
Left
},
props: {
default: true,
Left: true
}
  • 对象模式。对象里面包含的就是props参数值,当props为参数时,路由对应的组件就会将其直接设置props参数。
js 复制代码
props: {id:123},

当porps参数值固定时可以采用该模式。

  • 函数模式。函数模式相当于对象模式的升级版本,它让props的值变成动态的,函数有route参数,我们可以通过route去获取路由上的参数值,然后将其设置成props的值。
js 复制代码
props: route => ({ id: route.params.id })

源码

下面我们简单了解下props属性如何与组件的porps对应上,源码注释中提到了props是与router-view配合使用的,上节我们讲解命名视图时也解析了一下RouterView.ts文件,除了自身porps参数,我们可以找到routeProps:

简单解析此源码逻辑:

  1. 通过命名name获取当前路由设置的porps,注意name默认是default。
  2. 判断配置是否为空,为空返回null
  3. 判断是否为布尔模式,为true返回params。
  4. 判断是否为函数模式,为函数时调用routePropsOption(route),否则就是对象模式。 最终我们得到routeProps,在创建虚拟dom时加上。

总结

以上就是路由组件传参,后续我们在开发过程中,可以考虑props传参,而不是一直用$route传参。

相关推荐
陈随易2 分钟前
VSCode v1.102发布,AI体验大幅提升
前端·后端·程序员
markyankee1013 分钟前
Vue 表单输入绑定终极指南:从基础到企业级实践
vue.js
ma776 分钟前
JavaScript 获取短链接原始地址的解决方案
前端
该用户已不存在6 分钟前
关于我把Mac Mini托管到机房,后续来了,还有更多玩法
服务器·前端·mac
借月8 分钟前
🎯 用 Vue + SVG 实现一个「蛇形时间轴」组件,打造高颜值事件流程图
vue.js
tianchang9 分钟前
SSR 深度解析:从原理到实践的完整指南
前端·vue.js·设计模式
闲蛋小超人笑嘻嘻10 分钟前
前端面试十一之TS
前端
摆烂为不摆烂10 分钟前
😁深入JS(四): 一文让你完全了解Iterator+Generator 实现async await
前端
DoraBigHead23 分钟前
🧠 别急着传!大文件上传里,藏着 Promise 的高级用法
前端·javascript·面试
嘉琪00126 分钟前
封装一个有最小化的dialog组件
前端·javascript·css