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

时间:2019-02-18 08:42:35

标签: javascript vue.js vue-router

我有这样的路由配置:

{
    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>

1 个答案:

答案 0 :(得分: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供参考