"vue-router": "^4.3.0"如何配置多级路由，代码示例

在"vue-router"版本为4.3.0的情况下配置多级路由的代码示例如下所示[^1]：

1. 引入VueRouter和相关组件：

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../views/Home.vue'
import About from '../views/About.vue'
import Contact from '../views/Contact.vue'
import Profile from '../views/Profile.vue'

2. 创建路由实例并配置路由：

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: About,
    children: [
      {
        path: 'contact',
        name: 'Contact',
        component: Contact
      },
      {
        path: 'profile',
        name: 'Profile',
        component: Profile
      }
    ]
  }
]

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

3. 在Vue应用中使用路由：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)
app.use(router)
app.mount('#app')

在上述代码示例中，我们创建了一个多级路由，其中About组件下有两个子路由：Contact和Profile。当访问/about/contact时，会渲染Contact组件；当访问/about/profile时，会渲染Profile组件。