告别静态路由烦恼：gin-vue-admin动态路由实现的5个核心技巧-优快云博客

告别静态路由烦恼：gin-vue-admin动态路由实现的5个核心技巧

【免费下载链接】gin-vue-admin flipped-aurora/gin-vue-admin: 是一个基于Gin和Vue.js的后台管理系统。适合用于需要构建Web后台管理界面的项目。特点是可以提供前后端分离的系统架构，支持快速开发和丰富的功能集成。项目地址: https://gitcode.com/gh_mirrors/gi/gin-vue-admin

你是否还在为后台管理系统的路由配置烦恼？每次增减功能都要手动修改路由文件？权限变更时还要重新部署前端？本文将带你深入了解gin-vue-admin如何基于Vue3+Element Plus实现动态路由，从权限验证到组件加载，全方位解析企业级路由方案的最佳实践。读完本文，你将掌握动态路由的设计思路、实现步骤和性能优化技巧，彻底摆脱静态路由的桎梏。

动态路由架构概览

gin-vue-admin的动态路由系统采用前后端协同的设计模式，通过权限控制、路由生成、组件加载三个核心环节实现页面的动态渲染。系统架构如图所示：

mermaid

核心实现文件包括：

路由守卫：动态路由的第一道关卡

路由守卫是动态路由实现的核心，它负责在页面跳转前完成权限验证、路由生成等关键操作。在gin-vue-admin中，路由守卫的实现位于web/src/permission.js文件中，主要包含以下功能：

登录状态验证

系统通过token判断用户是否已登录，对白名单路由（如登录页）直接放行，未登录用户则重定向至登录页：

// 白名单路由处理
if (WHITE_LIST.includes(to.name)) {
  if (token) {
    if(!routerStore.asyncRouterFlag){
      await setupRouter(userStore)
    }
    if(userStore.userInfo.authority.defaultRouter){
      return { name: userStore.userInfo.authority.defaultRouter }
    }
  }
  return true
}

动态路由生成

当用户已登录且未加载动态路由时，系统会调用setupRouter方法从后端获取菜单数据并生成路由：

// 处理异步路由
if (!routerStore.asyncRouterFlag && !WHITE_LIST.includes(from.name)) {
  const setupSuccess = await setupRouter(userStore)
  
  if (setupSuccess && userStore.token) {
    return handleRedirect(to, userStore)
  }
  
  return {
    name: 'Login',
    query: { redirect: to.fullPath }
  }
}

路由数据处理：从后端菜单到前端路由

从后端获取的菜单数据需要经过格式化处理才能转换为前端可用的路由配置。这一过程主要在web/src/pinia/modules/router.js中实现，包含路由格式化、组件映射和权限过滤三个关键步骤。

路由格式化

formatRouter函数负责将后端返回的菜单数据转换为符合Vue Router要求的格式，并建立路由映射表：

const formatRouter = (routes, routeMap, parent) => {
  routes &&
    routes.forEach((item) => {
      item.parent = parent
      item.meta.btns = item.btns
      item.meta.hidden = item.hidden
      if (item.meta.defaultMenu === true) {
        if (!parent) {
          item = { ...item, path: `/${item.path}` }
          notLayoutRouterArr.push(item)
        }
      }
      routeMap[item.name] = item
      if (item.children && item.children.length > 0) {
        formatRouter(item.children, routeMap, item)
      }
    })
}

动态组件加载

web/src/utils/asyncRouter.js中的asyncRouterHandle函数通过Vite的import.meta.glob实现组件的动态加载：

export const asyncRouterHandle = (asyncRouter) => {
  asyncRouter.forEach((item) => {
    if (item.component && typeof item.component === 'string') {
      item.meta.path = '/src/' + item.component
      if (item.component.split('/')[0] === 'view') {
        item.component = dynamicImport(viewModules, item.component)
      } else if (item.component.split('/')[0] === 'plugin') {
        item.component = dynamicImport(pluginModules, item.component)
      }
    }
    if (item.children) {
      asyncRouterHandle(item.children)
    }
  })
}

路由状态管理：Pinia中的路由控制

gin-vue-admin使用Pinia管理路由状态，通过web/src/pinia/modules/router.js实现路由数据的存储和操作。核心功能包括：

路由数据获取与处理

SetAsyncRouter方法从后端获取菜单数据，处理后生成前端路由配置：

const SetAsyncRouter = async () => {
  asyncRouterFlag.value++
  const baseRouter = [
    {
      path: '/layout',
      name: 'layout',
      component: 'view/layout/index.vue',
      meta: {
        title: '底层layout'
      },
      children: []
    }
  ]
  const asyncRouterRes = await asyncMenu()
  const asyncRouter = asyncRouterRes.data.menus
  // 路由处理逻辑...
  asyncRouters.value = baseRouter
  return true
}

菜单状态管理

通过topMenu和leftMenu两个状态变量管理顶部菜单和侧边栏菜单的展示：

watchEffect(() => {
  let topActive = sessionStorage.getItem('topActive')
  // 初始化菜单内容，防止重复添加
  topMenu.value = [];
  asyncRouters.value[0]?.children.forEach((item) => {
    if (item.hidden) return
    menuMap[item.name] = item
    topMenu.value.push({ ...item, children: [] })
  })
  if (!topActive || topActive === 'undefined' || topActive === 'null') {
    topActive = findTopActive(menuMap, route.name);
  }
  setLeftMenu(topActive)
})

性能优化：动态路由的加载策略

动态路由虽然灵活，但也可能带来性能问题。gin-vue-admin通过多种优化手段确保路由加载的高效性：

组件懒加载

使用Vite的import.meta.glob实现组件的按需加载，只有当路由被访问时才会加载对应的组件：

const viewModules = import.meta.glob('../view/**/*.vue')
const pluginModules = import.meta.glob('../plugin/**/*.vue')

function dynamicImport(dynamicViewsModules, component) {
  const keys = Object.keys(dynamicViewsModules)
  const matchKeys = keys.filter((key) => {
    const k = key.replace('../', '')
    return k === component
  })
  const matchKey = matchKeys[0]
  return dynamicViewsModules[matchKey]
}

路由缓存策略

通过keepAliveRouters控制需要缓存的路由组件，避免重复渲染：

const setKeepAliveRouters = (history) => {
  const keepArrTemp = []
  
  // 添加原有的keepAlive配置
  keepArrTemp.push(...keepAliveRoutersArr)
  if (config.KeepAliveTabs) {
    history.forEach((item) => {
      // 为history中的路由启用keep-alive
      const routeInfo = routeMap[item.name]
      if (routeInfo && routeInfo.meta && routeInfo.meta.path) {
        const componentName = pathInfo[routeInfo.meta.path]
        if (componentName) {
          keepArrTemp.push(componentName)
        }
      }
    })
  }
  keepAliveRouters.value = Array.from(new Set(keepArrTemp))
}

实战案例：动态路由的实现步骤

下面以添加一个"客户管理"模块为例，演示如何在gin-vue-admin中使用动态路由：

后端配置菜单：在数据库中添加菜单记录，设置路径、组件路径和权限标识
前端权限控制：确保用户角色拥有该菜单的访问权限
组件开发：在view目录下创建组件文件web/src/view/example/exa_customer.vue
路由自动生成：系统会自动获取菜单数据并生成路由，无需手动修改路由文件

动态路由系统会自动完成组件加载、权限校验和菜单展示，整个过程无需前端代码部署。

总结与展望

gin-vue-admin的动态路由系统通过前后端协同的方式，完美解决了传统静态路由的种种弊端。核心优势包括：

权限与路由解耦：路由由后端动态生成，权限变更无需前端部署
组件按需加载：通过Vite实现组件懒加载，提升页面加载速度
灵活的菜单控制：支持多级菜单、动态显示/隐藏和个性化配置
完善的缓存策略：智能缓存路由组件，优化用户体验

未来，动态路由系统还可以在以下方面进一步优化：

路由数据的本地缓存，减少请求次数
路由预加载策略，提升用户体验
更精细的权限控制，支持按钮级别的权限管理

掌握动态路由不仅是使用gin-vue-admin的基础，更是现代前端架构设计的必备技能。希望本文能帮助你深入理解动态路由的实现原理，为你的项目开发提供参考。如果你有任何问题或建议，欢迎在项目仓库中提出issue，我们将持续优化动态路由系统，为开发者提供更好的使用体验。

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考