前言

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

路由组件传参

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

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

Vue Router学习（八）——路由组件传参
注意上面的注释，该属性会配合着router-view使用。继续看下_RouteRecordProps代表的类型：

Vue Router学习（八）——路由组件传参
从图上我们可以清晰看到，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: {id:123},

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

函数模式。函数模式相当于对象模式的升级版本，它让props的值变成动态的，函数有route参数，我们可以通过route去获取路由上的参数值，然后将其设置成props的值。

props: route => ({ id: route.params.id })

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

Vue Router学习（八）——路由组件传参
简单解析此源码逻辑：

Vue Router学习（八）——路由组件传参

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

原文链接：https://juejin.cn/post/7315280636930850866 作者：躺平使者