如何在Vue JS中显示嵌套在父`router-view`中的子`router-view`的组件？答案

【问题标题】：How to display components of a child `router-view` that is nested within parent `router-view` in Vue JS?如何在Vue JS中显示嵌套在父`router-view`中的子`router-view`的组件？
【发布时间】：2021-04-22 13:37:41
【问题描述】：

我正在尝试创建一个侧边菜单（仪表板的带有内容的侧边菜单），我必须使用多个 router-view。

第一个router-view 在包含所有组件的App.vue 中。

  <div id="app">
    <router-view></router-view>
  </div>

第二个router-view 存在于上面的router-view 中：

  <div class="dashboard">
    <Sidebar />
    <div class="content">
      <router-view name="content"></router-view>
    </div>
  </div>

根据下面的router/index.js代码，如果用户访问/链接，他将被重定向到仪表板页面。

const routes = [
  {
    path: "",
    name: "Dashboard",
    component: dashboard,
  },
  {
    path: "/messages",
    name: "Messages",
    components: {
      content: Messages,
    },
  },
  {
    path: "/profile",
    name: "Profile",
    components: {
      content: Profile,
    },
  },
  {
    path: "/settings",
    name: "Settings",
    components: {
      content: Settings,
    },
  },
  {
    path: "/dashboard",
    name: "Overview",
    components: {
      content: Overview,
    },
  },
];

在上面的Sidebar 组件中，有一些链接在点击后会在右侧显示该链接的内容（如仪表板中）：

<div class="sidebar">
    <div class="title">
        Simple Sidebar
    </div>
    <div class="menu-items">
        <router-link to="" active-class="active" tag="button" exact class="side-btn">
            <div class="link-container">
                Overview
            </div>
        </router-link>
        <router-link to="/messages" active-class="active" tag="button" exact class="side-btn">
            <div class="link-container">
                Messages
            </div>
        </router-link>
        // ....
    </div>
</div>

对于第二个router-view，我添加了一个名称：

<router-view name="content"></router-view>

然后我在router/index.js 中将其标识为：

  {
    path: "/messages",
    name: "Messages",
    components: {
      content: Messages,
    },
  },

但是没有用。

谁能帮我调试和解决这个问题，提前谢谢。

【问题讨论】：

标签： vue.js vue-router vuejs3

【解决方案1】：

nested route 需要 children 路由配置，而 Dashboard 的路由配置中缺少该配置。

将Messages的路由配置移动到Dashboard的children数组中：

const routes = [
  {
    path: "",
    name: "Dashboard",
    component: dashboard,
    children: [
      {
        path: "/messages",
        name: "Messages",
        components: {
          content: Messages,
        },
      },
    ]
  },
  //...
]

【讨论】：