vue-router 源码分析——10.路由组件传参

重生之我是蔡经理

于 2024-08-10 13:37:47 发布

阅读量1k

点赞数 18

分类专栏：前端文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/miyagiSimple/article/details/141089697

版权

这是对vue-router 3 版本的源码分析。
本次分析会按以下方法进行：

按官网的使用文档顺序，围绕着某一功能点进行分析。这样不仅能学习优秀的项目源码，更能加深对项目的某个功能是如何实现的理解。这个对自己的技能提升，甚至面试时的回答都非常有帮助。
在围绕某个功能展开讲解时，所有不相干的内容都会暂时去掉，等后续涉及到对应的功能时再加上。这样最大的好处就是能循序渐进地学习，同时也不会被不相干的内容影响。省略的内容都会在代码中以…表示。
每段代码的开头都会说明它所在的文件目录，方便定位和查阅。如果一个函数内容有多个函数引用，这些都会放在同一个代码块中进行分析，不同路径的内容会在其头部加上所在的文件目录。

官网例子

路由组件传参的作用是将组件和路由状态进行解耦，使得组件可以在多个不同url路径的路由中使用。
官网例子虽然解释了使用props将路由和组件解耦的方法，但是没有直观地展示这么做的好处，下面是我写的一个例子：在这里例子可以看到，多个路由中重用这个UserProfile组件，而不管路由的参数是如何命名的。这样不仅体现了解耦，更体现了组件的复用性和易维护性。

const UserProfile = {
   
  props: ['userId'],
  template: '<div>User Profile for {
   { userId }}</div>'
}

const router = new VueRouter({
   
  routes: [
    {
    path: '/user/:id', component: UserProfile, props: route => ({
    userId: route.params.id }) },
    {
    path: '/profile/:userId', component: UserProfile, props: route => ({
    userId: route.params.userId }) },
  ]
})