动态路由生成实现方案

原创 已于 2025-08-15 15:04:53 修改 · 318 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #elementui #javascript #前端

于 2025-08-14 16:21:23 首次发布

以下是具体实现步骤：

1. 创建路由工具文件

首先，需要创建一个路由工具文件 src/renderer/src/router/utils.ts，用于将菜单列表转换为路由配置。请复制以下代码并保存到该文件中：

import { RouteRecordRaw } from 'vue-router'

/**
 * 递归将菜单列表转换为路由配置
 * @param menuList 菜单列表
 * @returns 路由配置数组
 */
export function generateRoutes(menuList: any[]): RouteRecordRaw[] {
  const routes: RouteRecordRaw[] = []

  menuList.forEach(menu => {
    const route: RouteRecordRaw = {
      path: menu.path || '',
      name: menu.name || '',
      meta: {
        title: menu.title || '',
        icon: menu.icon || '',
        requiresAuth: menu.requiresAuth !== false
      }
    }

    // 处理组件路径
    if (menu.component) {
      // 假设组件路径格式为 '@renderer/view/xxx/index.vue'
      route.component = () => import(`@renderer/view/${menu.component}/index.vue`)
    }

    // 处理子菜单
    if (menu.children && menu.children.length > 0) {
      route.children = generateRoutes(menu.children)
    }

    routes.push(route)
  })

  return routes
}

/**
 * 将生成的路由添加到路由实例
 * @param router 路由实例
 * @param routes 生成的路由配置
 */
export function addRoutesToRouter(router: any, routes: RouteRecordRaw[]) {
  routes.forEach(route => {
    router.addRoute(route)
  })
}

2. 修改 home/index.vue 文件

接下来，需要修改 src/renderer/src/view/home/index.vue 文件，在获取菜单列表后动态生成路由：

// ... existing code ...
import { useRouter } from 'vue-router'
import { generateRoutes, addRoutesToRouter } from '@renderer/router/utils'

const router = useRouter()
const userStore = useUserStore()

const getRouters = async () => {
    const res = await getRoutersApi(userStore.roles[0].rolePerm)
    console.log('菜单列表:', res)

    // 假设res.data包含菜单列表
    if (res.data && res.data.length > 0) {
        // 生成路由
        const dynamicRoutes = generateRoutes(res.data)
        // 添加到路由实例
        addRoutesToRouter(router, dynamicRoutes)
        console.log('动态路由生成成功:', dynamicRoutes)
    }
}
// ... existing code ...

3. 优化路由守卫

为了确保动态路由加载完成后再进行路由跳转，可以修改 src/renderer/src/router/index.ts 中的路由守卫：

// ... existing code ...
import { ref } from 'vue'

// 标记动态路由是否已加载
const isDynamicRoutesLoaded = ref(false)

// 路由守卫
router.beforeEach(async (to, from, next) => {
  const userStore = useUserStore()
  // 检查是否需要登录
  if (to.meta.requiresAuth) {
    // 检查登录状态
    const isAuthenticated = await userStore.checkAuth()
    if (isAuthenticated) {
      // 如果动态路由未加载，则加载动态路由
      if (!isDynamicRoutesLoaded.value) {
        // 这里需要调用获取菜单列表的接口
        const res = await getRoutersApi(userStore.roles[0].rolePerm)
        if (res.data && res.data.length > 0) {
          const dynamicRoutes = generateRoutes(res.data)
          addRoutesToRouter(router, dynamicRoutes)
          isDynamicRoutesLoaded.value = true
          // 重新导航到目标路由
          next({ ...to, replace: true })
          return
        }
      }
      next()
    } else {
      next('/login')
    }
  } else {
    // 不需要登录的页面
    if (to.path === '/login' && await userStore.checkAuth()) {
      // 如果已登录，重定向到首页
      next('/')
    } else {
      next()
    }
  }
})
// ... existing code ...
注意事项

  1. 上述代码假设您的菜单列表结构包含 path, name, title, component 和 children 等字段。您可能需要根据实际的接口返回结构进行调整。

  2. 需要在 router/index.ts 中导入 generateRoutes 和 addRoutesToRouter 函数，以及 getRoutersApi 接口。

  3. 动态路由加载逻辑可能需要根据您的项目实际情况进行调整，例如添加错误处理、加载状态等。

  4. 确保在使用路由守卫时正确处理异步操作，避免出现路由跳转异常。

侧边栏菜单渲染实现

为 menus.vue 文件添加模板部分，实现侧边栏菜单的渲染。以下是完整的实现代码：

<template>
  <el-menu
    :default-active="activeMenu"
    class="el-menu-vertical-demo"
    @select="handleMenuSelect"
    background-color="#f5f5f5"
    text-color="#333"
    active-text-color="#409EFF"
    :collapse="isCollapse"
  >
    <!-- 递归渲染菜单 -->
    <template v-for="menu in menuList" :key="menu.path">
      <!-- 有子菜单的项 -->
      <el-sub-menu v-if="menu.children && menu.children.length > 0" :index="menu.path">
        <template #title>
          <el-icon :size="18"><component :is="menu.meta.icon || 'Menu'"></component></el-icon>
          <span>{{ menu.meta.title }}</span>
        </template>
        <!-- 递归渲染子菜单 -->
        <template v-for="subMenu in menu.children" :key="subMenu.path">
          <el-sub-menu v-if="subMenu.children && subMenu.children.length > 0" :index="subMenu.path">
            <template #title>
              <el-icon :size="18"><component :is="subMenu.meta.icon || 'Menu'"></component></el-icon>
              <span>{{ subMenu.meta.title }}</span>
            </template>
            <!-- 第三级菜单 -->
            <el-menu-item
              v-for="thirdMenu in subMenu.children"
              :key="thirdMenu.path"
              :index="thirdMenu.path"
            >
              <el-icon :size="18"><component :is="thirdMenu.meta.icon || 'Menu'"></component></el-icon>
              <span>{{ thirdMenu.meta.title }}</span>
            </el-menu-item>
          </el-sub-menu>
          <!-- 无子菜单的项 -->
          <el-menu-item v-else :index="subMenu.path">
            <el-icon :size="18"><component :is="subMenu.meta.icon || 'Menu'"></component></el-icon>
            <span>{{ subMenu.meta.title }}</span>
          </el-menu-item>
        </template>
      </el-sub-menu>
      <!-- 无子菜单的项 -->
      <el-menu-item v-else :index="menu.path">
        <el-icon :size="18"><component :is="menu.meta.icon || 'Menu'"></component></el-icon>
        <span>{{ menu.meta.title }}</span>
      </el-menu-item>
    </template>
  </el-menu>
</template>

<script setup lang="ts">
import { ref, onMounted, computed } from 'vue'
import { getRoutersApi } from '@renderer/api/user'
import { useUserStore } from '@renderer/store/user'
import { useRouter, useRoute } from 'vue-router'
import { generateRoutes, addRoutesToRouter } from '@renderer/router/routerChange'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const userStore = useUserStore()
const router = useRouter()
const route = useRoute()

// 菜单列表
const menuList = ref<any[]>([])
// 菜单折叠状态
const isCollapse = ref(false)
// 当前激活的菜单
const activeMenu = computed(() => {
  return route.path
})

// 获取路由
const getRouters = async () => {
  const data = await getRoutersApi(userStore.roles[0].rolePerm)
  // 生成路由
  const dynamicRoutes = generateRoutes(data)
  // 添加到路由实例
  addRoutesToRouter(router, dynamicRoutes)
  menuList.value = dynamicRoutes
  console.log('动态路由生成成功:', dynamicRoutes)
}

// 菜单选择事件处理
const handleMenuSelect = (index: string) => {
  router.push(index)
}

onMounted(() => {
  getRouters()
})
</script>

<style lang="scss" scoped>
.el-menu-vertical-demo {
  height: 100vh;
  width: 200px;
  position: fixed;
  left: 0;
  top: 30px; // 与顶部窗口控制栏高度对齐
  overflow-y: auto;
}

// 菜单折叠时的样式
.el-menu--collapse {
  width: 64px;
}

// 自定义滚动条样式
.el-menu-vertical-demo::-webkit-scrollbar {
  width: 6px;
}

.el-menu-vertical-demo::-webkit-scrollbar-thumb {
  background-color: #ddd;
  border-radius: 3px;
}

.el-menu-vertical-demo::-webkit-scrollbar-track {
  background-color: #f5f5f5;
}
</style>

实现说明

  1. 模板部分：

    • 使用 Element Plus 的 <el-menu> 组件创建垂直菜单

    • 通过 v-for 遍历 menuList 数据渲染菜单项

    • 对有子菜单的项使用 <el-sub-menu>，无子菜单的项使用 <el-menu-item>

    • 递归渲染子菜单，支持多级菜单结构

    • 使用动态组件 <component :is="menu.meta.icon"> 渲染菜单图标

  2. 脚本部分：

    • 导入并注册所有 Element Plus 图标

    • 添加 activeMenu 计算属性，根据当前路由高亮对应的菜单项

    • 实现 handleMenuSelect 方法，处理菜单点击事件并跳转路由

    • 保留原有的 getRouters 方法获取和处理菜单数据

  3. 样式部分：

    • 设置菜单高度为全屏，宽度为 200px

    • 固定菜单在左侧，顶部留出 30px 给窗口控制栏

    • 添加滚动条样式美化

    • 配置菜单折叠时的宽度为 64px

使用说明

  1. 确保已在项目中正确引入 Element Plus 和图标库

  2. 将上述代码替换到 menus.vue 文件中

  3. 菜单数据会从后端 API 获取并动态渲染

  4. 点击菜单项会自动跳转到对应的路由

  5. 菜单会根据当前路由自动高亮

Vue Router 实现动态路由和常见问题及解决方法
01-21
常见的动态路由大都是用来实现：多用户权限系统不同用户展示不同导航菜单。 如何利用Vue Router 实现动态路由 Vue项目实现动态路由的方式大体可分为两种： 前端将全部路由规定好，登录时根据用户角色权限来动态展示...
详解基于vue-router的动态权限控制实现方案
08-29
基于 Vue-Router 的动态权限控制实现方案 在本篇文章中，我们将详细介绍基于 Vue-Router 的动态权限控制实现方案。该方案主要解决了在使用 Vue 开发带权限管理系统时，如何动态加载路由 path 对应的 component 的...
Vue核心知识：动态路由实现完整方案
百锦再的博客
03-01 4992
实现Vue中的动态路由不仅仅需要前端的配置，还涉及到后端与数据库的配合。通过数据库存储路由信息和角色权限，后端根据角色返回路由数据，前端通过vue-router动态生成路由配置，并通过vuex管理路由状态。动态加载组件也是提高性能的一个关键点，确保用户只在需要时才加载路由对应的组件。通过这种方式，系统可以灵活地配置和管理不同用户的权限路由，使得前端界面能够根据用户角色和权限进行个性化的展示。
鸿蒙动态路由实现方案
假装自己很用心的博客
01-16 1001
随着CSDN 鸿蒙APP 业务功能的增加，以及为了与iOS、Android 端统一页面跳转路由，以及动态下发路由链接，路由重定向等功能。鸿蒙动态路由方案的实现迫在眉睫。
iOS 动态路由实现方案
假装自己很用心的博客
07-11 4588
随着App的版本迭代，很多原本原生实现的页面，需要通过新的H5页面进行升级/降级，或者原本PC或者H5页面，需要重定向到已有的原生页面。而这些基本都是硬编码的跳转逻辑，可能需要随着版本不停改动。...
vue3实现动态路由
i_am_a_div的博客
03-25 2502
vue3实现动态路由
前端开发之vue动态路由实现方案
m0_50207524的博客
04-25 1140
本篇讲解的路由实现方案：默认存在的路由json->登录获取路由的json数据和权限->index.vue页面通过watch监听router为路由附加默认值->通过router.push跳转->触发beforeEach实现页面权限的判断和addrouter合并路由列表。
vue3动态路由的实现
热门推荐
csdnyp的博客
07-01 1万+
vue3动态路由的实现
Vue3动态路由生成指南：实现灵活路由控制与案例解析
梦想成为公务员
02-10 1194
在大型前端项目中，动态路由生成是实现权限控制、模块化加载和代码优化的关键技术。本文将深入讲解Vue3中动态路由的实现方案，并通过一个完整的权限控制案例演示实际应用。本文通过完整的权限控制案例，演示了Vue3动态路由的典型应用场景
动态路由的实现
weixin_46178009的博客
06-14 2911
vue3动态路由的几种实现思路
【个人总结】动态路由实现方案
小管打天下的博客
10-19 653
只管菜单，不管路由（全部写死）弊端：用户可以在导航栏访问。
Vue3.0中实现的动态路由权限控制
weixin_43883615的博客
07-15 1813
动态路由权限控制是项目常用的功能，这里介绍一种方式，通过将后端权限码与本地路由的JSON配置ID进行匹配，能够有效地实现用户权限的控制。不同角色的操作项是根据权限码匹配到的路由进行区分的，这样可以确保每个用户只能看到与自己所属角色相关的操作项。随后，通过特定方法将其转换为路由格式，并通过addRoute方法动态添加路由，从而实现了灵活而精准的用户权限路由控制。
vue自定义指令和动态路由实现权限控制
11-19
2. **动态路由**：在Vue中，动态路由是指能够根据不同的参数生成不同的页面。在`src/router/index.js`中，我们会看到两个部分，`constantRoutes`是静态路由，这些路由是应用中固定不变的部分，而`asyncRoutes`则是...
el-tree 编辑后保持现有展开状态
最新发布
m0_49494051的博客
08-15 135
一个小需求让我写这么多代码，可恶！
20道Vue框架相关前端面试题及答案
qq_39540458的博客
08-14 891
Vue是一个渐进式JavaScript框架，具有响应式数据绑定、组件化开发等核心特性。面试常见问题包括：双向数据绑定原理（Vue2使用Object.defineProperty，Vue3改用Proxy）、生命周期钩子（如created、mounted）、组件通信方式（props/emit、provide/inject等）、计算属性与监听器的区别、v-if与v-show的适用场景等。Vuex用于状态管理，包含state、mutations等核心概念；Vue Router支持hash和history两种路由模式
Vue 3 的 Effect 函数的嵌套与循环处理
weixin_43359503的博客
08-15 520
在之前的 Vue2与Vue3响应式原理与依赖收集详解 一文中，我们讲述了 Vue 2 与 Vue 3 在实现数据响应式处理的设计思路与他们的不同之处，也分析了 Vu
VUE3 学习笔记2 computed、watch、生命周期、hooks、其他组合式API
mashirokayo的博客
08-15 942
在vue3中，虽然也能写vue2的computed，但还是更推荐使用vue3语法的computed。computed是一个函数。它的参数接收一个函数，这个函数可以是普通函数，也可以是箭头函数，由于vue3中没有this，所以无需关注函数类型对this指向的影响。这个函数就是计算的方法函数。但是通过这种方式定义的计算属性，是只读的，无法对属性进行修改。如果计算属性同时需要读取和修改，要通过下面这种形式：传入computed的参数是一个对象，在对象中配置get和set。
Vue 2 和 Vue 3 响应式原理深度对比
2301_81137804的博客
08-14 1201
在前端开发中，响应式系统是 Vue 的核心之一，它让数据与视图自动保持同步。 从 Vue 2 到 Vue 3，响应式实现方式发生了质的变化，不仅性能更好，还解决了 Vue 2 的一些历史局限。本文将从 底层原理、性能表现、功能支持、开发体验 四个方面，对比 Vue 2 和 Vue 3 的响应式系统。
(vue)将文件夹打成tar包， Git Bash（推荐）具体使用
nyf_unknow的博客
08-14 192
查看项目。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值