vue3+element-plus+vite实现动态路由菜单方式

npm create vite@latest my-project(你的项目名)

cd  my-project

npm i

npm install vue-router@4 pinia element-plus @element-plus/icons-vue

<template>
  <router-view />
</template>

<script setup lang="ts">
</script>

<style scoped lang="scss">
#app {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: space-around;
}
</style>

// router/dynamicRoutes.ts
// 更新 initDynamicRoutes，确保 dynamicRoutes 被更新
import router from './index';
import { useRouteStore } from '@/store/index'; // 导入 store
import type { RouteRecordRaw, RouteRecordRedirectOption } from 'vue-router';

// 定义菜单项类型，确保 `name` 是 `string`
type MenuItem = Omit<RouteRecordRaw, 'component' | 'children' | 'redirect'> & {
  name: string; // 必须有 name 属性
  path: string; // 必须有 path 属性
  component?: () => Promise<Component>; // 用于动态加载组件的路径
  children?: MenuItem[]; // 子路由类型
  redirect?: string; // 调整 redirect 为更简单的 string 类型
  meta?: {
    title: string;
  };
};
// Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块
const modules: Record<string, () => Promise<Component>> = import.meta.glob('../views/**/**.vue');

// 初始化动态路由
export const initDynamicRoutes = (menuData: MenuItem[]) => {
  const routeStore = useRouteStore(); // 获取 store
  const routerList: MenuItem[] = [];
  const addedRoutes = new Set(); // 用于跟踪已添加的路由，防止重复添加

  // 递归处理路由
  const processRoutes = (routes: MenuItem[]): MenuItem[] => {
    return routes.map((item) => {
      if (addedRoutes.has(item.name)) return null; // 防止重复处理
      addedRoutes.add(item.name); // 标记路由为已处理

      const componentLoader = modules[`../views${item.component}.vue`];
      const route: MenuItem = {
        path: item.path,
        name: item.name as string,
        component: componentLoader , // 提供默认组件以防找不到
        meta: item.meta,
      };

      // 如果有子路由，递归处理
      if (item.children && item.children.length > 0) {
        route.children = processRoutes(item.children);
        route.redirect = route.children[0]?.path; // 默认重定向到第一个子路由
      } else {
        route.children = undefined; // 明确设置为 undefined
      }

      return route;
    }).filter((route) => route !== null) as MenuItem[]; // 过滤掉 null 项
  };

  // 顶级路由处理
  const parentRouter = processRoutes(menuData);

  // 根路由配置
  routerList.push({
    path: '/',
    name: 'home',
    component: () => import('../layout/AppLayout.vue'),
    children: parentRouter, // 顶级路由作为子路由
    redirect: parentRouter[0]?.path || '/', // 确保有默认重定向路径
  });
  
  // 将路由存储到 store 中
  routeStore.dynamicRoutes = routerList;
  // 添加路由到 Vue Router
  routerList.forEach((route) => {
    router.addRoute(route as RouteRecordRaw);
  });
};

// router/index.ts
import { createRouter, createWebHashHistory, RouteRecordRaw } from "vue-router";
import { useRouteStore } from "@/store";
// 静态路由
const routes: RouteRecordRaw[] = [
  {
    path: "/login",
    name: "login",
    component: () => import("@/views/login/index.vue"),
  },
  {
    path: "/404",
    component: () => import("@/views/error-page/404.vue"),
  },
  {
    path: "/401",
    component: () => import("@/views/error-page/401.vue"),
  },
  // 匹配所有路径
  { path: "/:pathMatch(.*)", redirect: "/login" },
];

// 创建路由
const router = createRouter({
  history: createWebHashHistory(), // 路由模式
  routes, // 静态路由
});

// 路由守卫：初始化时跳转到上次访问的页面
window.addEventListener('DOMContentLoaded', () => {
  const routeStore = useRouteStore()

  const beforeReloadRoute = sessionStorage.getItem('beforeReloadRoute')
  if (beforeReloadRoute) {
    const to = JSON.parse(beforeReloadRoute)
    routeStore.beforeRouter = to.path
    // 清除保存的路由信息
    sessionStorage.removeItem('beforeReloadRoute')
    // 导航回刷新前的路由
    router.replace(to)
    const keys = Object.keys(to)
    if (keys.includes('name')) {
      sessionStorage.setItem('roterPath', JSON.stringify(to.name))
    }
  }
})

// 在页面即将刷新时保存当前路由信息
window.addEventListener('beforeunload', () => {
  const currentRoute = JSON.stringify(router.currentRoute.value)
  sessionStorage.setItem('beforeReloadRoute', currentRoute)
})


export default router;

import { createVNode, render } from 'vue';
import { initDynamicRoutes } from '@/router/dynamicRoutes';
import router from './router/index';
import loadingBar from '@/component/loadingBar.vue';
import Cookies from 'js-cookie'; // 引入 js-cookie
import { useRouteStore } from '@/store/index';
import menuData from '/public/dynamicRouter.json'; // 导入动态菜单数据

const whileList = ['/login']; // 白名单
const Vnode = createVNode(loadingBar);
render(Vnode, document.body);

router.beforeEach(async (to, from, next) => {
  const routeStore = useRouteStore(); // 获取 Pinia 中的路由状态
  const token = Cookies.get('token'); // 从 cookie 获取 token

  // 判断是否有 token，存在则说明用户已登录
  if (token) {
    // 检查是否已经加载过动态路由
    if (routeStore.dynamicRoutes.length === 0) {
      // 检查是否有持久化的动态路由
      const persistedRoutes = sessionStorage.getItem('dynamicRoutes');  // 使用 sessionStorage
      if (persistedRoutes) {
        // 如果有持久化的动态路由，直接从 sessionStorage 加载
        const routerList = JSON.parse(persistedRoutes);
        initDynamicRoutes(routerList); // 动态初始化路由
        routeStore.setDynamicRoutes(routerList); // 将动态路由存入 Pinia
        next({ ...to, replace: true }); // 确保动态路由加载后再跳转
        Vnode.component?.exposed?.startLoading(); // 启动加载条
      } else {
        // 如果没有持久化的动态路由，则使用静态的 dynamicRouter.json
        const dynamicRoutes = initDynamicRoutes(menuData); // 动态初始化路由
        if (dynamicRoutes !== undefined) {
          routeStore.setDynamicRoutes(dynamicRoutes); // 将动态路由存入 Pinia
          sessionStorage.setItem('dynamicRoutes', JSON.stringify(dynamicRoutes)); // 存储动态路由到 sessionStorage
          next({ ...to, replace: true }); // 确保动态路由加载后再跳转
          Vnode.component?.exposed?.startLoading(); // 启动加载条
        } else {
          next('/login'); // 如果没有动态路由信息，跳转到登录页面
        }
      }
    } else {
      next(); // 如果已经加载过动态路由，直接跳转
    }
  } else {
    // 如果没有 token，判断是否在白名单中
    if (whileList.includes(to.path)) {
      next(); // 白名单路由放行
    } else {
      next('/login'); // 否则跳转到登录页
    }
  }
});

router.afterEach(() => {
  Vnode.component?.exposed?.endLoading(); // 结束加载条
});

// store/index.ts
import { createPinia } from 'pinia';
import { useRouteStore } from './useRouteStore';
import { useUserStore } from './tokenStore';

// 创建 pinia 实例
const pinia = createPinia();

// 将所有 store 模块暴露
export { pinia, useRouteStore, useUserStore };

import { defineStore } from 'pinia';
import { ref } from 'vue';
import { initDynamicRoutes } from "@/router/dynamicRoutes"; // 导入初始化动态路由的方法
import type { RouteRecordRaw, RouteRecordRedirectOption } from 'vue-router';

// 定义菜单项类型，确保 `name` 是 `string`
type MenuItem = Omit<RouteRecordRaw, 'component' | 'children' | 'redirect'> & {
  name: string; // 必须有 name 属性
  path: string; // 必须有 path 属性
  component?: () => Promise<Component>; // 用于动态加载组件的路径
  children?: MenuItem[]; // 子路由类型
  redirect?: string; // 调整 redirect 为更简单的 string 类型
  meta?: {
    title: string;
  };
};
// 定义路由数据 Store
export const useRouteStore = defineStore('route', () => {
  // 存储菜单数据
  const menuData = ref<MenuItem[]>([]); // 根据你的菜单数据结构调整类型

  // 存储动态路由数据
  const dynamicRoutes = ref<MenuItem[]>([]);

  // 存储是否已初始化路由的状态
  const isRoutesInitialized = ref<boolean>(false);

  // 存储上一次页面刷新的路由
  const beforeRouter = ref<string>('');

  // 初始化动态路由
  const setDynamicRoutes = (menu: any[]) => {
    // 只在未初始化路由时执行
    if (!isRoutesInitialized.value) {
      // 调用 initDynamicRoutes 函数来生成动态路由
      initDynamicRoutes(menu);

      // 将菜单数据存储到状态中
      menuData.value = menu;

      // 设置已初始化状态
      isRoutesInitialized.value = true;
    }
  };

  // 获取动态路由
  const getDynamicRoutes = () => {
    return dynamicRoutes.value;
  };

  // 更新动态路由
  const setUpdatedDynamicRoutes = (routes: MenuItem[]) => {
    dynamicRoutes.value = routes;
  };

  return {
    menuData,
    dynamicRoutes,
    isRoutesInitialized, // 公开这个状态，方便其他地方判断
    setDynamicRoutes,
    getDynamicRoutes,
    setUpdatedDynamicRoutes, // 更新动态路由的函数
    beforeRouter
  };
});

/* Element-plus组件库 */
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import zhCn from 'element-plus/es/locale/lang/zh-cn'

import { App } from 'vue'

export default {
  install (app: App) {
    app.use(ElementPlus, {
      locale: zhCn
    })
  }
}

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router/index";
import ElementPlus from "./plugins/element-plus";
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
import { pinia } from '@/store/index';  // 导入 store
// 创建 Pinia 实例

// 路由拦截 路由发生变化修改页面title
router.beforeEach((to, from, next) => {
  if (to.meta.title) {
    document.title = to.meta.title;
  }
  next();
});
const app = createApp(App);
// // 自动注册全局组件

app.use(router).use(ElementPlus).use(pinia).mount("#app");
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component);
}

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
    // 设置别名 方便路径引入
      '@': path.resolve(__dirname, 'src'),
    }
  }
})

{ 
  "compilerOptions": 
  { 
    "target": "ESNext", 
    "useDefineForClassFields": true, 
    "module": "ESNext", 
    "moduleResolution": "Node", 
    "strict": true, 
    "jsx": "preserve", 
    "sourceMap": true, 
    "resolveJsonModule": true, 
    "isolatedModules": true, 
    "esModuleInterop": true, 
    "lib": ["ESNext", "DOM"], 
    "skipLibCheck": true, 
    "noEmit": true,
    "paths": {
      "@/*": ["./src/*"]  // 配置路径别名，不做配置会报错
    }
    //就是这个没有设置导致的
     }, 
    // "extends": "./tsconfig.extends.json",
    "include": ["src/**/*.tsx","src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"],
    "references": [{ "path": "./tsconfig.node.json" }]
}

 /// <reference types="vite/client" />
// 类型补充、环境变量
declare module "*.vue" {
  import type { DefineComponent } from "vue";
  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
  const component: DefineComponent<{}, {}, any>;
  export default component;
}

// eslint-disable-next-line no-unused-vars
interface ImportMetaEnv {
  readonly VITE_APP_TITLE: string;
  readonly VITE_API_BASEURL: string;
  // 更多环境变量...
}

// 如果遇到路径缺失找不到的情况
// 无法找到模块“xxx”的声明文件,就将该模块加入到下列代码中进行补充声明
declare module "xxxx";

[
  {
    "path": "/principle", 
    "name": "principle", 
    "component": "/principle/index",
    "meta": {
      "title": "Vue3响应式原理"
    }
  },
  {
    "path": "/ref",
    "name": "ref", 
    "meta": {
      "title": "ref类"
    },
    "children": [
      {
        "path": "/ref/index", 
        "name": "ref", 
        "component": "/ref/common/ref", 
        "meta": {
          "title": "ref"
        }
      },
      {
        "path": "/ref/toRaw", 
        "name": "toRaw", 
        "component": "/ref/common/toRaw", 
        "meta": {
          "title": "toRaw"
        }
      },
      {
        "path": "/ref/toRef", 
        "name": "toRef", 
        "component": "/ref/common/toRef", 
        "meta": {
          "title": "toRef"
        }
      },
      {
        "path": "/ref/toRefs", 
        "name": "toRefs", 
        "component": "/ref/common/toRefs", 
        "meta": {
          "title": "toRefs"
        }
      },
      {
        "path": "/ref/isRef", 
        "name": "isRef", 
        "component": "/ref/no-common/isRef", 
        "meta": {
          "title": "isRef"
        }
      },
      {
        "path": "/ref/Ref", 
        "name": "Ref", 
        "component": "/ref/no-common/Ref", 
        "meta": {
          "title": "Ref"
        }
      },
      {
        "path": "/ref/shallowRef", 
        "name": "shallowRef", 
        "component": "/ref/no-common/shallowRef", 
        "meta": {
          "title": "shallowRef"
        }
      },
      {
        "path": "/ref/triggerRef", 
        "name": "triggerRef", 
        "component": "/ref/no-common/triggerRef", 
        "meta": {
          "title": "triggerRef"
        }
      }
    ]
  }
]

<template>
  <div class="login">
    //登录框
    <div class="loginPart">
      <h2>用户登录</h2>
      <el-form
        ref="ruleFormRef"
        :model="user"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
        style="transform: translate(-30px)"
      >
        <el-form-item
          label="账号："
          prop="account"
        >
          <el-input
            v-model="user.account"
            placeholder="请输入账号"
            maxlength="20"
            clearable
          />
        </el-form-item>
        <el-form-item
          label="密码："
          prop="password"
        >
          <el-input
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
            maxlength="20"
            show-password
            clearable
          />
        </el-form-item>
   
        <el-button
          class="btn"
          type="primary"
          @click="onSubmit(ruleFormRef)"
        >
          登录
        </el-button>
  
      </el-form>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted } from "vue";
//导入模拟的动态路由数据
import menuData from '/public/dynamicRouter.json'; // 导入动态菜单数据
import { ElMessage, type FormInstance } from "element-plus";
import { useRouter } from "vue-router";
import { initDynamicRoutes } from "@/router/dynamicRoutes"; // 导入初始化动态路由的方法
import { useRouteStore, useUserStore} from "@/store";
const router = useRouter();
const routeStore = useRouteStore();
const UserStore = useUserStore();

type loginReq = {
  account: string;
  password: string;
};

onMounted(() => {});
//from表单校验
const ruleFormRef = ref<FormInstance>();
// 这里存放数据
const user = reactive<loginReq>({
  account: "admin",
  password: "123456",
});
const users = reactive<loginReq>({
  account: "admin",
  password: "123456",
});
//校验
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入密码"));
  } else {
    callback();
  }
};
const validateAccount = (rule: any, value: any, callback: any) => {
  if (value === "") {
    callback(new Error("请输入账号"));
  } else {
    callback();
  }
};

//校验
const rules = reactive({
  password: [{ validator: validatePassword, trigger: "blur" }],
  account: [{ validator: validateAccount, trigger: "blur" }],
});
const changeRegist = () => {
  router.replace("/regist");
};

const onSubmit = (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  formEl.validate((valid) => {
    if (valid) {
          // 如果需要保存 token 或账户信息，存储在全局状态
          // 假设这里会调用登录 API 返回一个 token
          const token = "mock_token"; // 模拟登录后返回的 token
          // 使用 Pinia 保存 token，并设置到 cookie 中
          // 存储在 cookie 中的 token 可以配合 httpOnly 和 Secure 标志来增强安全性，
          // 这样可以防止 XSS 攻击并确保 token 只有在通过 HTTPS 协议时才会被发送
          UserStore.setToken(token);
          ElMessage.success("登录成功");
          // 获取菜单数据
          if(routeStore.isRoutesInitialized){
            // 使用 nextTick 确保路由添加完成后再进行跳转
            nextTick(() => {
              // 跳转到首页或其他路由
              router.push('/') // 假设 'home' 是你动态路由中的一个页面名称
                .then(() => {
                  console.log('跳转成功');
                })
                .catch((error) => {
                  console.error('跳转失败', error);
                });
            });
          }else{
            initDynamicRoutes(menuData)
              // 标记路由已初始化
            routeStore.isRoutesInitialized = true
            // 使用 nextTick 确保路由添加完成后再进行跳转
            nextTick(() => {
              // 跳转到首页或其他路由
              router.push('/') // 假设 'home' 是你动态路由中的一个页面名称
                .then(() => {
                  console.log('跳转成功');
                })
                .catch((error) => {
                  console.error('跳转失败', error);
                });
            });
          }
    }
  })
};

</script>
<style scoped lang="scss">
.login {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.login__particles {
  height: 100%;
  width: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("@/assets/0001.jpg");
  opacity: 0.9;
  position: fixed;
  pointer-events: none;
}

h2 {
  margin: 0 0 30px;
  padding: 0;
  color: #fff;
  text-align: center;
  /*文字居中*/
}
.btn {
  transform: translate(170px);
  width: 80px;
  height: 40px;
  font-size: 15px;
}
</style>

<!-- 自定义编辑的样式不采用element-plus -->
<template>
  <div class="app-container">
    <header>
      <div class="menu">
        <el-col :span="24">
          <el-menu
            :router="true"
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            text-color="#fff"
            @open="handleOpen"
            @close="handleClose"
            :unique-opened="true"
            :default-active="defaultPath"
          >
            <div
              v-for="(item, index) in menuList[0].children"
              :key="index"
            >
              <el-menu-item
                v-if="!item.children"
                :index="item.path"
                :route="item.path"
              >
                <!-- <el-icon><setting /></el-icon> -->
                <span>{{ item.meta?.title }}</span>
              </el-menu-item>

              <el-sub-menu
                v-if="item.children"
                :index="item.path"
              >
                <template #title>
                  <!-- <el-icon><setting /></el-icon> -->
                  <span>{{ item.meta?.title }}</span>
                </template>
                <el-menu-item-group>
                  <el-menu-item
                    v-for="(child, childIndex) in item.children"
                    :key="childIndex"
                    :index="child.path"
                  >
                    {{ child.meta?.title }}
                  </el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
            </div>
          </el-menu>
        </el-col>
      </div>
    </header>
    <main>
      <router-view />
    </main>
  </div>
</template>

<script lang="ts" setup>
import { computed, onMounted } from "vue";
import { useRouteStore } from '@/store'; // 调整路径为实际 Store 文件位置
import { useRouter } from "vue-router";
const router = useRouter()
const routeStore = useRouteStore();
const menuList = computed(() => routeStore.dynamicRoutes);
const defaultPath = ref<string>('')
const handleOpen = (key: string, keyPath: string[]) => {
  console.log('key', key);
  console.log('keyPathpen',  keyPath);
};

const handleClose = (key: string, keyPath: string[]) => {
  console.log('close', key, keyPath);
};

onMounted(() => {
  defaultPath.value = routeStore.beforeRouter
});
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 确保所有元素都遵循边框盒模型 */
  touch-action: none;
}

.app-container {
  display: flex; /* 使用 flexbox 创建左右布局 */
  justify-content: space-between;
  height: 100vh; /* 设置容器高度为视口高度 */
  background-color: #fff;
}

header {
  width: 150px; /* 固定宽度，左侧菜单栏宽度，可以根据需要调整 */
  // background-color: #f8f9fa; /* 设置背景颜色 */
  box-shadow: 2px 0px 10px rgba(0, 0, 0, 0.1); /* 给左侧菜单栏添加阴影 */
  overflow-y: auto; /* 左侧菜单支持垂直滚动 */
  height: 100vh; /* 使 header 高度占满整个屏幕 */
  .el-menu {
  height: 100vh; /* 高度占满全屏 */
  width: 100%; /* 设置菜单宽度为220px，避免过窄 */
  font-size: 0.175rem;
  font-weight: bold;
  color: #fff;
  overflow-y: scroll;

  /* 确保菜单项宽度一致 */
  .el-menu-item,
    .el-sub-menu {
      width: 100%; /* 确保菜单项和子菜单项的宽度自适应 */
      // padding-left: 0.25rem; /* 为每个菜单项增加左侧的内边距 */
    }

    /* 一级菜单项 */
    .el-menu-item {
      padding: 10px 20px; /* 设置内边距，避免菜单项过于拥挤 */
      text-align: left; /* 左对齐文本 */
      font-size: 0.175rem; /* 调整字体大小 */
    }

    /* 二级菜单项（子菜单） */
    .el-sub-menu {
      // padding-left: 10px; /* 为二级菜单增加缩进 */
      background-color: #434d56; /* 给二级菜单背景设置一个较深的颜色 */

      /* 子菜单项的缩进 */
      .el-menu-item {
        padding-left: 1rem; /* 设置二级菜单项的缩进，区别于一级菜单 */
      }
    }

    /* 子菜单的展开箭头样式 */
    :deep(.el-sub-menu__icon-arrow) {
      color: #ffd04b; /* 设置箭头颜色为黄色 */
    }

    /* 设置展开状态时，子菜单的背景色变化 */
    .el-sub-menu.is-opened {
      background-color: #3a424a; /* 打开时的背景色 */
    }

    /* 设置菜单项和子菜单项的 hover 状态 */
    .el-menu-item:hover,
    .el-sub-menu:hover {
      background-color: #333c44; /* 鼠标悬浮时的背景色 */
    }

    /* 设置当前激活的菜单项的背景颜色 */
    .el-menu-item.is-active {
      background-color: #ff6600; /* 激活状态的背景色 */
    }
  }
  .el-menu::-webkit-scrollbar{
    display: none;
  }
  /* 自定义子菜单图标大小 */
  .el-menu-item .el-icon,
  .el-sub-menu .el-icon {
    font-size: 1.2rem; /* 调整图标的大小 */
    margin-right: 0.5rem; /* 给图标增加右侧的间距 */
  }
  :deep(.el-sub-menu__title){
    width: 100%!important;
  }
  .el-menu-item span,
  .el-sub-menu span {
    font-size: 10px; /* 设置文本的字体大小 */
    font-weight: bold; /* 设置文本加粗 */
  }
  :deep(.el-sub-menu__icon-arrow){
    left: 50px!important;
  }
}

main {
  display: flex;
  flex: 1; /* main 占据剩余空间 */
  // margin-left: 250px; /* 给 main 留出与 header 相同的空间 */
  padding: 20px;
  overflow-y: auto; /* 支持内容区域滚动 */
  background-image: linear-gradient(135deg, #102363, #346177, #3fa489, #34ec98);
  flex-direction: column;
}

header::-webkit-scrollbar, main::-webkit-scrollbar {
  display: none; /* 隐藏滚动条 */
}

/* 小屏幕适配 */
@media (max-width: 768px) {
  .app-container {
    flex-direction: column; /* 在小屏幕下转换为上下布局 */
  }

  header {
    width: 100%; /* 屏幕小于768px时，左侧菜单占满全宽 */
    position: relative; /* 取消固定定位，方便移动 */
    height: auto; /* 自动高度 */
  }

  main {
    margin-left: 0; /* 小屏幕时不需要左侧留白 */
  }
}


</style>