vue3 3级路由配置

在Vue3中配置3级路由可以按照以下步骤进行：

1. 首先，在主路由文件中引入并注册Vue Router，并配置一级路由。

import { createRouter, createWebHistory } from "vue-router";
import Home from "./views/Home.vue";
import About from "./views/About.vue";

const routes = [
  {
    path: "/",
    component: Home,
  },
  {
    path: "/about",
    component: About,
  },
];

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

2. 接下来，在一级路由的组件中，配置二级路由。

// Home.vue
import { defineComponent } from "vue";
import { RouterView } from "vue-router";

export default defineComponent({
  name: "Home",
  components: { RouterView },
});

// About.vue
import { defineComponent } from "vue";
import { RouterView } from "vue-router";

export default defineComponent({
  name: "About",
  components: { RouterView },
});

3. 最后，在二级路由的组件中，配置三级路由。

// About.vue
import { defineComponent } from "vue";
import { RouterView } from "vue-router";
import Profile from "./Profile.vue";
import Settings from "./Settings.vue";

export default defineComponent({
  name: "About",
  components: { RouterView },
  children: [
    {
      path: "profile",
      component: Profile,
    },
    {
      path: "settings",
      component: Settings,
    },
  ],
});

这样就完成了Vue3中的三级路由配置。