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>

Vue-Router：嵌套路由不显示

1 个答案: