前言
上节介绍了命名视图,梳理了一下视图、组件、路由三者之间的关系。开发过程中经常有组件之间的交互,这时候可以使用路由组件进行传参,本节就来介绍一下路由组件传参。
路由组件传参
提起路由传参我们首先想到的应该是params与query两种方式传参,这两种传参方式都需要调用$route的对应方法,而且传递的参数也只能在匹配的组件使用,如果我们想要一个组件能够匹配不同的路由就可以使用props进行路由组件传参。
props
props是路由配置项的一个属性,表示组件传参,对应的ts类型如下:
注意上面的注释,该属性会配合着router-view使用。继续看下_RouteRecordProps代表的类型:
从图上我们可以清晰看到,props类型有三种:
- 布尔值
- 对象
- 函数
三个类型对应三种模式用法: - 布尔模式,当props为true时,路由上的params会被当成组件的props。写个简单的案例,在路由上添加id参数,然后在组件定义一个名称为id的porps参数。
const routes: RouteRecordRaw[] = [
{
path: '/home',
name: 'home',
component: () => import('@/components/Home.vue'),
props: true,
}
];
在home获取id参数就是url路由上面的id参数。上节我们介绍了命名视图,如果我们想要给多个命名视图设置porps时,只需要对应视图的名称。
components: {
default: Table,
Left
},
props: {
default: true,
Left: true
}
- 对象模式。对象里面包含的就是props参数值,当props为参数时,路由对应的组件就会将其直接设置props参数。
props: {id:123},
当porps参数值固定时可以采用该模式。
- 函数模式。函数模式相当于对象模式的升级版本,它让props的值变成动态的,函数有route参数,我们可以通过route去获取路由上的参数值,然后将其设置成props的值。
props: route => ({ id: route.params.id })
源码
下面我们简单了解下props属性如何与组件的porps对应上,源码注释中提到了props是与router-view配合使用的,上节我们讲解命名视图时也解析了一下RouterView.ts文件,除了自身porps参数,我们可以找到routeProps:
简单解析此源码逻辑:
- 通过命名name获取当前路由设置的porps,注意name默认是default。
- 判断配置是否为空,为空返回null
- 判断是否为布尔模式,为true返回params。
- 判断是否为函数模式,为函数时调用routePropsOption(route),否则就是对象模式。
最终我们得到routeProps,在创建虚拟dom时加上。
总结
以上就是路由组件传参,后续我们在开发过程中,可以考虑props传参,而不是一直用$route传参。
原文链接:https://juejin.cn/post/7315280636930850866 作者:躺平使者