Vue动态路由传参时缺失必填prop:id问题咨询

嘿，我碰到过一模一样的问题！你已经把路由和组件的prop都定义好了，但为啥还是报Missing required prop: "id"呢？核心原因是Vue不会自动把路由参数映射到组件的prop上，得咱们手动配置一下~

两种解决方法任你选 #

方法1：直接开启路由的prop自动映射 #

修改你的路由配置，给dataCenterDetail这条路由加上props: true属性就行：

// 路由配置文件（比如router/index.js）
const routes = [
  // 其他路由...
  {
    path: '/data-center/detail/:id',
    name: 'dataCenterDetail',
    component: () => import('@/views/数据中心/wx-number-detail.vue'),
    props: true // 这行是关键！开启后路由参数会自动作为prop传给组件
  }
]

这样一来，当你访问http://localhost:8080/data-center/detail/1时，路由里的id参数就会自动传递给组件的id prop，完美匹配你定义的必填Number类型。

方法2：自定义prop映射（更灵活） #

如果需要对路由参数做额外处理（比如把字符串类型的id转成数字，和你prop的Number类型严格匹配），可以用函数式的props配置：

const routes = [
  // 其他路由...
  {
    path: '/data-center/detail/:id',
    name: 'dataCenterDetail',
    component: () => import('@/views/数据中心/wx-number-detail.vue'),
    props: route => ({
      id: Number(route.params.id) // 把url里的字符串id转成数字
    })
  }
]

这种方式适合需要对参数做转换、拼接等自定义处理的场景，组件拿到的id就是标准的Number类型啦。

为啥之前会报错？ #

你组件里声明了id是必填prop，但路由没有把params.id传递给组件的prop，Vue的prop校验机制就会检测到必填项缺失，从而抛出警告。加上上面的配置后，路由和组件的prop就打通了，警告自然就消失了~

另外提个小建议：尽量用prop接收路由参数，而不是直接在组件里用this.$route.params.id，这样你的组件和路由就解耦了，以后想在其他地方复用这个组件也更方便！

内容的提问来源于stack exchange，提问作者user7693832