一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

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

前言

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

路由组件传参

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

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参数值,当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:

Vue Router学习(八)——路由组件传参
简单解析此源码逻辑:

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

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

总结

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

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

(0)
上一篇 2023年12月23日 上午10:31
下一篇 2023年12月23日 上午10:41

相关推荐

发表评论

登录后才能评论