javascript - Vue router-view 加载父组件而不是自己的组件

Question

我有这样的路由配置:

{
    path: '/',
    component: Dashboard,
    meta: { requiresAuth: true },
    children: [
        { path: 'home', components: { container: Home } },
        {
            path: 'post',
            components: { container: Post },
            children: [
                { path: 'add', components: { container: Add } }
            ]
        },
    ]
},

我有两个<router-view> s，其中一个名为container另一个没有透露姓名。我期待Add要加载到 container 的组件当我访问/post/add时路由器 View 。但它正在加载 Post成分。我错过了什么？

编辑:

Post.vue:

<template>
    <div>
        <p>I am <code>./views/post/Post.vue</code></p>
    </div>
</template>

Answer 1

尝试一下，从父组件中删除 Post 组件，并使用 path: '' 添加一个新的子组件。它看起来像这样 -

{
  path: 'post',
  component: // Include a component which only renders the router-view
  children: [
    { path: '', components: { container: Post } },
    { path: 'add', components: { container: Add } }
  ]
},

创建了 repl供您引用