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.Но он загружает 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 для вашей справки