vue3.2/Vite/Ts27: 项目全部路由配置

export const contantRoute = [
  {
    path: "/login",
    component: () => import("@/views/login/index.vue"),
    name: "login",
    meta: {
      title: "登录",
      hidden: true,
      icon: "xxx",
    },
  },
  {
    path: "/",
    component: () => import("@/layout/index.vue"),
    name: "layout",
    meta: {
      title: "layout",
      hidden: false,
      icon: "xxx",
    },
    // M
    redirect: "/home",
    children: [
      {
        path: "/home",
        component: () => import("@/views/home/index.vue"),
        meta: {
          title: "首页",
          hidden: false,
          icon: "xxx",
        },
      },
    ],
  },
  {
    path: "/404",
    component: () => import("@/views/404/index.vue"),
    name: "404",
    meta: {
      title: "404",
      hidden: true,
      icon: "xxx",
    },
  },
  // M
  {
    path: "/screen",
    component: () => import("@/views/screen/index.vue"),
    name: "Screen",
    meta: {
      title: "数据大屏",
      hidden: false,
      icon: "xxxx",
    },
  },
  // M
  // 这里用的还是 layout
  {
    path: "acl",
    component: () => import("@/layout/index.vue"),
    name: "Acl",
    meta: {
      title: "权限管理",
      hidden: false,
      icon: "xxxx",
    },
    children: [
      {
        path: "/acl/user",
        component: () => import("@/views/acl/user/index.vue"),
        name: "Acl",
        meta: {
          title: "用户管理",
          hidden: false,
          icon: "xxxx",
        },
      },
      {
        path: "/acl/role",
        component: () => import("@/views/acl/role/index.vue"),
        name: "Role",
        meta: {
          title: "角色管理",
          hidden: false,
          icon: "xxxx",
        },
      },
      {
        path: "/acl/permission",
        component: () => import("@/views/acl/permission/index.vue"),
        name: "Permission",
        meta: {
          title: "菜单管理",
          hidden: false,
          icon: "xxxx",
        },
      },
    ],
  },
  // M
  // 这里用的还是 layout
  // 商品管理
  {
    path: "/product",
    component: () => import("@/layout/index.vue"),
    name: "Product",
    meta: {
      title: "商品管理",
      icon: "xxxx",
      hidden: false,
    },
    children: [
      {
        path: "/product/trademark",
        component: () => import("@/views/product/trademark/index.vue"),
        name: "Trademark",
        meta: {
          title: "品牌管理",
          icon: "xxxx",
          hidden: false,
        },
      },
      {
        path: "/product/attr",
        component: () => import("@/views/product/attr/index.vue"),
        name: "Attr",
        meta: {
          title: "属性管理",
          icon: "xxxx",
          hidden: false,
        },
      },
      {
        path: "/product/spu",
        component: () => import("@/views/product/spu/index.vue"),
        name: "Spu",
        meta: {
          title: "SPU管理",
          icon: "xxxx",
          hidden: false,
        },
      },
      {
        path: "/product/sku",
        component: () => import("@/views/product/sku/index.vue"),
        name: "Sku",
        meta: {
          title: "SKU管理",
          icon: "xxxx",
          hidden: false,
        },
      },
    ],
  },
  {
    path: "/:pathMatch(.*)*",
    redirect: "/404",
    name: "Any",
    meta: {
      title: "任意路由",
      hidden: true,
      icon: "xxx",
    },
  },
];

|-- src
    |-- views
        |-- screen #数据大屏组件
            |-- index.vue
        |-- acl #权限管理
            |-- user #用户管理
                |-- index.vue
            |-- role #角色管理
                |-- index.vue
            |-- permission #菜单管理
                |-- index.vue
        |-- product #商品管理
            |-- trademark #品牌管理
                |-- index.vue
            |-- attr #属性管理
                |-- index.vue
            |-- sku
                |-- index.vue
            |-- spu
                |-- index.vue

<template>
  <div class="layout_container">
    <!-- 左侧菜单 -->
    <div class="layout_slider">
      <Logo></Logo>
      <!-- 展示菜单 -->
      <el-scrollbar class="scrollbar">
        <el-menu background-color="#001529" text-color="white">
          <menu :menuList="userStore.menuRoutes"></menu>
        </el-menu>
      </el-scrollbar>
    </div>
    <!-- 顶部导航 -->
    <div class="layout_tabbar"></div>
    <!-- 内容展示区域 -->
    <div class="layout_main">
      <!-- 这里是二级路由的出口 -->
      <router-view></router-view>
    </div>
  </div>
</template>
<script setup lang="ts">
  import Logo from "./logo/index.vue";
  import Menu from "./menu/index.vue";
  // 获取用户先关小仓库
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
</script>
<style scoped lang="scss">
  .scrollbar {
    width: 100%;
    height: calc(100vh - $base-menu-logo-height);
  }
</style>

<template>
  <router-view v-slot="{ Component }">
    <transition name="fade">
      <component :is="Component" />
    </transition>
  </router-view>
</template>
<style scoped lang="scss">
  .fade-enter-from {
    opacity: 0;
  }
  .fade-enter-active {
    transition: all 0.5s;
  }
  .fade-enter-to {
    opacity: 1;
  }
</style>

<!-- src / layout / index.vue -->
<template>
  <div class="layout_container">
    <!-- 左侧菜单 -->
    <div class="layout_slider">
      <Logo></Logo>
      <!-- 展示菜单 -->
      <el-scrollbar class="scrollbar">
        <el-menu background-color="#001529" text-color="white">
          <menu :menuList="userStore.menuRoutes"></menu>
        </el-menu>
      </el-scrollbar>
    </div>
    <!-- 顶部导航 -->
    <div class="layout_tabbar"></div>
    <!-- 内容展示区域 -->
    <div class="layout_main">
      <main />
    </div>
  </div>
</template>
<script setup lang="ts">
  import Logo from "./logo/index.vue";
  import Menu from "./menu/index.vue";
  // 获取用户先关小仓库
  import useUserStore from "@/store/modules/user";
  const userStore = useUserStore();
  // 引入 Main 组件
  import Main from "./main/index.vue";
</script>
<style scoped lang="scss">
  .scrollbar {
    width: 100%;
    height: calc(100vh - $base-menu-logo-height);
  }
</style>