为什么我的嵌套子菜单在 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路由是子路由，需要在父组件中有一个<router-view>(Guide.vue)。

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

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

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

demo