为什么我的嵌套子菜单不能在 vue-router 中工作？

Question

当我点击子菜单项 javascript 时，它没有显示组件 JavaScript.vue

[
{
  path: "/",
  name: "home",
  component: Home
},
{
  path: "/guide",
  name: "guide",
  component: () => import("./components/Guide.vue"),
  children: [
    {
      path: "/guide/javascript",
      name: "javascript",
      component: () => import("./components/JavaScript.vue")
    }
  ]
},
{
  path: "/service",
  name: "service",
  component: () => import("./components/Service.vue")
},
{ path: "*", component: () => import("./components/404.vue") }
]

我在CodeSandbox中有我的代码示例

Answer 1

javascript 路由是子路由，它需要在父组件（Guide.vue）中有一个<router-view>。

添加<router-view> 来解决问题：

<!-- Guide.vue -->
<template>
  <div class="hello">
    <h1>Guide</h1>
    <Top />

    <router-view />
  </div>
</template>

demo