前语

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

路由组件传参

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

props

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

• 布尔值
• 目标
• 函数
  三个类型对应三种形式用法：
• 布尔形式，当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：

1. 通过命名name获取当时路由设置的porps，留意name默认是default。
2. 判别配置是否为空，为空回来null
3. 判别是否为布尔形式，为true回来params。
4. 判别是否为函数形式，为函数时调用routePropsOption(route)，否则便是目标形式。 终究咱们得到routeProps，在创立虚拟dom时加上。

总结

以上便是路由组件传参，后续咱们在开发过程中，能够考虑props传参，而不是一向用$route传参。