vue.esm.js:578 [Vue 警告]：缺少必需的道具："id"

Question

我在详情组件中使用了动态路由：

dataCenterDetail: '/data-center/detail/:id'

在组件中有一个道具 id:

export default{
    props: {
      id:{
        type: Number,
        required: true
      }
    },

当我推送到详细路线时：在浏览器中：http://localhost:8080/data-center/detail/1

我会得到错误：

[Vue warn]: Missing required prop: "id"

found in

---> <WxNumberDetail> at src/views/数据中心/wx-number-detail.vue
       <Index> at src/views/index.vue
         <App> at src/app.vue
           <Root>

Answer 1

您可以使用router.params接收：

this.$router.params.id

接收传递的id。

如果你想使用props接收，你应该这样配置：

{ path: 'center/detail/:id', component: dataCenterDetailComponent, props: true }

Answer 2

您应该将 props: true 添加到您的路由定义中

 { path: 'center/detail/:id', component: MyComp, props: true }

见Passing Props to Route Components

vue.esm.js:578 [Vue 警告]：缺少必需的道具："id"

vue.esm.js:578 [Vue warn]: Missing required prop: "id"

vue.js

vue-router