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

前言

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

路由组件传参

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

props

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

注意上面的注释,该属性会配合着router-view使用。继续看下_RouteRecordProps代表的类型:

从图上我们可以清晰看到,props类型有三种:

  • 布尔值
  • 对象
  • 函数
    三个类型对应三种模式用法:
  • 布尔模式,当props为true时,路由上的params会被当成组件的props。写个简单的案例,在路由上添加id参数,然后在组件定义一个名称为id的porps参数。
js 复制代码
const routes: RouteRecordRaw[] = [
{
path: '/home',
name: 'home',
component: () => import('@/components/Home.vue'),
props: true,
}
];

在home获取id参数就是url路由上面的id参数。上节我们介绍了命名视图,如果我们想要给多个命名视图设置porps时,只需要对应视图的名称。

js 复制代码
components: {
default: Table,
Left
},
props: {
default: true,
Left: true
}
  • 对象模式。对象里面包含的就是props参数值,当props为参数时,路由对应的组件就会将其直接设置props参数。
js 复制代码
props: {id:123},

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

  • 函数模式。函数模式相当于对象模式的升级版本,它让props的值变成动态的,函数有route参数,我们可以通过route去获取路由上的参数值,然后将其设置成props的值。
js 复制代码
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传参。

相关推荐
一斤代码1 小时前
vue3 下载图片(标签内容可转图)
前端·javascript·vue
中微子1 小时前
React Router 源码深度剖析解决面试中的深层次问题
前端·react.js
光影少年1 小时前
从前端转go开发的学习路线
前端·学习·golang
中微子1 小时前
React Router 面试指南:从基础到实战
前端·react.js·前端框架
3Katrina1 小时前
深入理解 useLayoutEffect:解决 UI "闪烁"问题的利器
前端·javascript·面试
前端_学习之路2 小时前
React--Fiber 架构
前端·react.js·架构
伍哥的传说3 小时前
React 实现五子棋人机对战小游戏
前端·javascript·react.js·前端框架·node.js·ecmascript·js
qq_424409193 小时前
uniapp的app项目,某个页面长时间无操作,返回首页
前端·vue.js·uni-app
我在北京coding3 小时前
element el-table渲染二维对象数组
前端·javascript·vue.js
布兰妮甜3 小时前
Vue+ElementUI聊天室开发指南
前端·javascript·vue.js·elementui