前语
上节介绍了命名视图，梳理了一下视图、组件、路由三者之间的关系。开发过程中经常有组件之间的交互，这时候能够运用路由组件进行传参，本节就来介绍一下路由组件传参。
路由组件传参
提起路由传参咱们首先想到的应该是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传参。