vue3 路由怎么使用，有二级路由

Vue3 的路由主要是通过 Vue Router 这个官方提供的库来管理应用程序的不同视图。以下是基本步骤：

1. 安装 Vue Router：

   npm install @vue/router

2. 引入并配置 router：

   import { createRouter, createWebHistory } from 'vue-router';
   
   const routes = [
     {
       path: '/', component: HomeView,
       children: [
         { path: 'about', component: AboutView },
         { path: 'contact', component: ContactView }
       ]
     }
   ];
   
   const router = createRouter({
     history: createWebHistory(),
     routes
   });

这里我们创建了一个根路由`/`，它包含了两个二级路由：`/about` 和 `/contact`。

3. 配置导航守卫 (Guard)：
可以设置 beforeEach 或者 afterEach 来控制路由变化前后的操作，比如权限验证等。

4. 使用 `router.push` 或者 `<router-link>` 在组件内切换路由：

   <router-link to="/about">关于</router-link>
   <router-link to="/contact">联系</router-link>

5. 在 App 组件或者布局文件中挂载 router：

   <template>
     <AppRouter :router="router"></AppRouter>
   </template>

   <script>
   export default {
     components: {
       AppRouter
     },
     setup() {
       return { router };
     }
   };
   </script>

6. 在每个需要切换视图的地方，通过 `this.$router` 访问路由API。