Vue-Router：嵌套路由不显示

Question

When using nested routes, the component does not display. If I do not use nested route, the component displays as expected. Any ideas on what I may be doing wrong with nested route?

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>

Answer 1

I got it working by adding <router-view></router-view> to my template code.

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