vue3 多级嵌套路由

在 Vue3 中，多级嵌套路由的配置同样很容易完成。你只需要按照嵌套路由的方式，递归地定义子路由即可。

以下是一个简单的示例：

import { createRouter, createWebHistory } from 'vue-router'

const routes = [
  {
    path: '/',
    component: () => import('@/views/Home.vue'),
    children: [
      {
        path: 'about',
        component: () => import('@/views/About.vue')
      },
      {
        path: 'contact',
        component: () => import('@/views/Contact.vue'),
        children: [
          {
            path: 'email',
            component: () => import('@/views/Email.vue')
          },
          {
            path: 'phone',
            component: () => import('@/views/Phone.vue')
          }
        ]
      }
    ]
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

export default router

在上面的例子中，我们定义了一个父路由 `/`，它将渲染 `Home.vue` 组件，并包含两个子路由 `/about` 和 `/contact`，后者又包含两个子路由 `/email` 和 `/phone`，它们分别渲染 `Email.vue` 和 `Phone.vue` 组件。

在 App.vue 中，我们同样使用 `<router-view>` 标签来渲染路由：

<template>
  <div id="app">
    <router-view />
  </div>
</template>

这将渲染父路由组件 `Home.vue`，并在其中递归地渲染子路由组件，直到最后一级子路由。