vue3+vite router 多级路由示例

好的，这里是一个使用Vue 3和Vite搭建的多级路由示例：

首先，我们需要安装Vue Router：

npm install vue-router@4.0.0-0

接下来，我们创建一个router.js文件，在其中定义我们的路由：

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

const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue')
  },
  {
    path: '/about',
    component: () => import('./views/About.vue')
  },
  {
    path: '/users',
    component: () => import('./views/Users.vue'),
    children: [
      {
        path: '',
        component: () => import('./views/UsersList.vue')
      },
      {
        path: ':id',
        component: () => import('./views/UsersDetail.vue')
      }
    ]
  }
]

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

export default router

这里我们定义了三个路由，分别是根路径'/'、'/about'和'/users'。其中，'/users'是一个嵌套路由，包含了'/users'和'/users/:id'两个子路由。

接着，在我们的main.js文件中，我们需要将router引入，并将其挂载到Vue实例上：

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

const app = createApp(App)

app.use(router)

app.mount('#app')

最后，我们需要在App.vue中加入\<router-view>标签，用于渲染路由组件：

<template>
  <div id="app">
    <nav>
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/users">Users</router-link>
    </nav>
    <router-view></router-view>
  </div>
</template>

这样，我们就完成了一个简单的多级路由示例。访问'/users'路径时，将会渲染Users.vue组件，并在其内部渲染UsersList.vue组件；访问'/users/:id'路径时，将会渲染Users.vue组件，并在其内部渲染UsersDetail.vue组件。