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”

2 个答案: