Vue-Router：嵌套路由不显示答案

【问题标题】：Vue-Router: Nested routes not displayingVue-Router：嵌套路由不显示
【发布时间】：2019-08-02 10:57:37
【问题描述】：

使用嵌套路由时，组件不显示。如果我不使用嵌套路由，组件将按预期显示。关于嵌套路由可能做错的任何想法？

import ManufacturersReport from "@/components/ManufacturersReport";
import Reports from "@/components/Reports";

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: "/reports",
      name: "Reports",
      component: Reports,
      children: [
        { path: "manufacturer_report", component: ManufacturersReport }
      ]
    }
  ],
  mode: "history"
});


<template>
  <header class="header">
    <h1>Reports</h1>
    <div id="nav">
      <router-link to="/reports/manufacturer_report">MF Report</router-link>|
    </div>
  </header>
</template>

【问题讨论】：

标签： vue.js vue-component vue-router

【解决方案1】：

我通过将<router-view></router-view> 添加到我的模板代码中使其工作。

<template>
  <header class="header">
    <h1>Reports</h1>
    <div id="nav">
      <router-link to="/reports/manufacturer_report">MF Report</router-link>|
      <router-link to="/ping">Reports</router-link>
      <router-view></router-view>
    </div>
  </header>
</template>

【讨论】：