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，另一个没有命名。我希望在访问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供参考

Vue路由器视图加载父组件而不是其自身

1 个答案: