Vue-Vben-Admin 路由与菜单系统深度解析

戴艺音

于 2025-06-01 09:03:18 发布

阅读量378

点赞数 5

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/gitblog_00074/article/details/148360600

Vue-Vben-Admin 路由与菜单系统深度解析

vue-vben-admin vbenjs/vue-vben-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统，支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统，可以方便地实现数据的查询和管理，同时支持多种数据库和插件扩展。项目地址: https://gitcode.com/gh_mirrors/vu/vue-vben-admin

前言

在现代前端管理系统中，路由和菜单是构建应用骨架的重要组成部分。Vue-Vben-Admin 作为一款优秀的中后台解决方案，提供了一套完善的路由和菜单管理系统。本文将深入解析该框架的路由机制，帮助开发者更好地理解和运用这套系统。

路由系统架构

Vue-Vben-Admin 的路由系统采用了分层设计，主要分为三种类型：

1. 核心路由 (Core Routes)

核心路由是框架运行的基础，包含以下关键路由：

根路由 (/)
登录路由 (/login)
404 路由 (/404)
错误路由 (/error)

这些路由存放在 src/router/routes/core 目录下，开发者一般不需要修改这些路由，除非有特殊需求。

最佳实践：业务相关路由不应放在核心路由中，而应使用静态或动态路由。

2. 静态路由 (Static Routes)

静态路由在应用启动时就已确定，通常包含：

首页
个人中心
系统设置等不依赖权限的页面

静态路由配置在 src/router/routes/static 目录下，采用模块化设计，每个路由模块都是一个独立的 TS 文件。

3. 动态路由 (Dynamic Routes)

动态路由根据用户权限动态生成，典型场景包括：

不同角色看到不同的菜单
权限控制精细到按钮级别

动态路由存放在 src/router/routes/modules 目录下，框架会在用户登录后根据权限动态加载这些路由。

路由定义规范

基础路由结构

Vue-Vben-Admin 的路由定义遵循 Vue Router 的标准格式，同时扩展了丰富的 meta 配置：

import type { RouteRecordRaw } from 'vue-router';

const routes: RouteRecordRaw[] = [
  {
    path: '/example',
    name: 'Example',
    component: () => import('@/views/example/index.vue'),
    meta: {
      title: '示例页面',
      icon: 'ant-design:example-outlined',
      keepAlive: true
    }
  }
];

多级路由实现

框架支持无限层级的路由嵌套，这是构建复杂菜单系统的关键：

{
  path: '/nested',
  name: 'Nested',
  redirect: '/nested/menu1',
  meta: {
    title: '多级菜单'
  },
  children: [
    {
      path: 'menu1',
      name: 'Menu1',
      component: () => import('@/views/nested/menu1.vue'),
      meta: {
        title: '一级菜单'
      },
      children: [
        // 可以继续嵌套
      ]
    }
  ]
}

自动重定向机制：父级路由无需指定 redirect，框架会自动指向第一个子路由。

路由元信息 (Meta) 详解

meta 是路由配置的核心，控制着路由的各种行为和展示方式：

基础配置项

| 配置项 | 类型 | 说明 | 默认值 | |--------|------|------|--------| | title | string | 页面标题，显示在菜单和标签页 | - | | icon | string | 图标，支持图标库和图片链接 | - | | keepAlive | boolean | 是否启用页面缓存 | false | | hideInMenu | boolean | 是否在菜单中隐藏 | false | | hideInTab | boolean | 是否在标签页中隐藏 | false |

权限控制

meta: {
  authority: ['admin', 'super'], // 允许访问的角色
  ignoreAccess: false // 是否忽略权限检查
}

标签页控制

meta: {
  affixTab: true, // 固定标签页
  affixTabOrder: 1, // 固定标签页排序
  maxNumOfOpenTab: 5 // 最大打开标签页数
}

特殊路由类型

meta: {
  iframeSrc: 'https://example.com', // 内嵌iframe
  link: 'https://external.com', // 外链
  noBasicLayout: true // 不使用基础布局
}

实战：新增业务页面

步骤1：创建路由文件

在 src/router/routes/modules 下新建 business.ts：

import type { RouteRecordRaw } from 'vue-router';

export default [
  {
    path: '/business',
    name: 'Business',
    redirect: '/business/list',
    meta: {
      title: '业务管理',
      icon: 'ion:business-outline'
    },
    children: [
      {
        path: 'list',
        name: 'BusinessList',
        component: () => import('@/views/business/list.vue'),
        meta: {
          title: '业务列表',
          keepAlive: true
        }
      }
    ]
  }
] as RouteRecordRaw[];

步骤2：创建页面组件

在 src/views/business 下创建 list.vue：

<template>
  <div class="p-4">
    <h1>业务列表</h1>
    <!-- 业务内容 -->
  </div>
</template>

<script setup lang="ts">
// 业务逻辑
</script>

步骤3：验证路由

启动项目后，访问 /business/list 即可看到新页面。

高级功能

路由刷新机制

框架提供了优雅的路由刷新方案：

<script setup>
import { useRefresh } from '@vben/hooks';

const { refresh } = useRefresh();

function handleRefresh() {
  refresh(); // 刷新当前路由
}
</script>

标签页控制

控制标签页行为的关键配置：

// 相同路由不同参数打开多个标签页
router.push({
  path: '/detail',
  query: {
    id: 1,
    pageKey: 'detail-1' // 唯一标识
  }
});

// 修改query不新建标签页
router.push({
  path: '/list',
  query: { page: 2 },
  replace: true
});