时间戳

首页 > 解决方案 > Vue router-view 加载父组件而不是它自己的

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

问题描述

我有这样的路由配置：

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

标签： javascriptvue.jsvue-router

解决方案

试试这个，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供您参考

推荐阅读