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

Question

我在detail组件中使用动态路由：

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

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

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

请参阅将道具传递给路由组件

Answer 2

您可以使用router.params接收它：

this.$router.params.id 

接收经过的身份证明。

如果要使用props进行接收，则应该配置如下：

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