如何实现多级子菜单和没用子菜单的路由在router-view中跳转

在 Vue.js 的路由中，可以使用嵌套路由实现多级子菜单的效果。具体实现方法如下：

1. 在路由配置中定义嵌套路由。例如，如果要实现一个多级菜单，可以在路由配置中定义一个父路由和多个子路由，每个子路由对应一个子菜单。

{
  path: '/parent',
  component: ParentComponent,
  children: [
    {
      path: 'child1',
      component: Child1Component
    },
    {
      path: 'child2',
      component: Child2Component
    }
  ]
}

2. 在菜单组件中使用 `router-link` 组件来生成菜单链接。例如，如果要生成一个链接到子菜单的菜单项，可以使用以下代码：

<router-link to="/parent/child1">Child 1</router-link>

3. 在父组件中使用 `<router-view>` 组件来显示子组件。例如，在父组件的模板中添加以下代码：

<template>
  <div>
    <!-- 显示父组件的内容 -->
    <h1>Parent Component</h1>
    <!-- 显示子组件的内容 -->
    <router-view></router-view>
  </div>
</template>

如果要实现没有子菜单的路由跳转，可以直接在菜单组件中使用 `router-link` 组件生成链接，并在 `to` 属性中指定路由路径。例如：

<router-link to="/about">About</router-link>

这样就可以实现在 `router-view` 中显示对应组件的效果。