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>，一个叫container，一个不叫。我希望在访问 /post/add 时将 Add 组件加载到 container 路由器视图中。但它正在加载 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供您参考

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

Vue router-view loading parents component instead of its own

javascript

vue.js

vue-router