传递路由器值作为道具

Question

我将数据传递为

路线

{
    path: '/name/:nameSlug',
    name: 'NameItem',
    props: true,
    components: { home: Name }
},

路由器link到组件

<router-link :to="{ name: 'NameItem', params: { nameSlug: name.nameSlug } }">
  {{ name.english }} 
</router-link>
 // name object
{
  "id": 1303,
  "english": "bob",
  "gender": "M",
  "nameSlug": "bob"
}

NameItem 道具

props: {
    nameSlug: {
        type: String,
        required: true
    }
},

我收到此页面的以下错误，这是什么问题？使用 "vue-router": "^3.2.0":

TypeError: Cannot read property 'nameSlug' of undefined

或者这个，注意 url 确实改变了

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

Answer 1

在 documentation...

中查看此注释

for routes with named views, you have to define the props option for each named view

您的路线使用命名视图“home”，因此您需要类似以下内容

{
  path: '/name/:nameSlug',
  name: 'NameItem',
  props: {
    default: true,
    home: true
  },
  components: { home: Name }
},

传递路由器值作为道具

Passing router value as prop

vue.js

vue-router