将路由器值作为道具传递

Question

我将数据作为

路线

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

路由器链接到组件

<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: 无法读取未定义的属性 'nameSlug'

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

<块引用>

[Vue 警告]：缺少必需的道具：“nameSlug”

Answer 1

请参阅 documentation...

中的此注释 <块引用>

对于具有命名视图的路由，您必须为每个命名视图定义 props 选项

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

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