Vue-Router: вложенные маршруты не отображаются

Question

При использовании вложенных маршрутов компонент не отображается.Если я не использую вложенный маршрут, компонент отображается так, как ожидается.Любые идеи о том, что я могу делать не так с вложенным маршрутом?

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

Я заработал, добавив <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>