3分钟上手Jeesite路由黑科技：Vue Router实战指南-优快云博客

3分钟上手Jeesite路由黑科技：Vue Router实战指南

【免费下载链接】jeesite Java rapid development platform, based (Spring Boot, Spring MVC, Apache Shiro, MyBatis, Beetl, Bootstrap, AdminLTE), online code generation, including modules: Organization, role users, menu and button authorization, data permissions, system parameters, content management, workflow, etc. Loose coupling design is adopted; one key skin switch; account security Settings, password policies; Online scheduled task configuration; Support cluster, support SAAS; Support for multiple data sources 项目地址: https://gitcode.com/gh_mirrors/jee/jeesite

你还在为复杂系统的路由管理头疼吗？权限控制混乱、路由嵌套过深、动态加载失败？Jeesite前端路由方案基于Vue Router构建，通过模块化设计、自动化处理和灵活配置，完美解决这些问题。读完本文，你将掌握路由初始化、动态权限路由、多标签页管理等核心技能。

路由系统架构解析

Jeesite路由系统采用分层设计，核心代码集中在packages/core/router/目录下，主要包含：

路由创建与配置：index.ts
路由定义与分类：routes/index.ts
路由辅助工具：helper/routeHelper.ts

核心模块关系

mermaid

路由类型划分

系统将路由分为三类，在routes/index.ts中定义：

基础路由：无需权限的公共路由，如登录页、404页

export const basicRoutes = [LoginRoute, ModPwdRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE, PAGE_NOT_FOUND_ROUTE];

动态路由：需权限控制的业务路由，通过后端接口获取
嵌套路由：通过LAYOUT组件实现的多层级路由结构

路由初始化流程

路由初始化入口在setupRouter函数，主要完成三件事：

安装路由实例到Vue应用
初始化标签页管理系统
配置路由拦截器与导航守卫

路由创建核心代码

// 创建路由实例
export const router = createRouter({
  history: createRouteHistory(),
  routes: basicRoutes as unknown as RouteRecordRaw[],
  strict: true,
  scrollBehavior: () => ({ left: 0, top: 0 }),
});

其中createRouteHistory函数根据环境变量自动选择history模式：

// 环境变量控制路由模式
export function createRouteHistory() {
  if (env.VITE_ROUTE_WEB_HISTORY == 'true') {
    return createWebHistory(env.VITE_PUBLIC_PATH);
  } else {
    return createWebHashHistory(env.VITE_PUBLIC_PATH);
  }
}

动态权限路由实现

Jeesite通过以下机制实现基于角色的动态路由：

路由权限过滤

系统在登录后会根据用户角色动态生成可访问路由，核心逻辑在路由守卫中实现：

// 重置路由（登出时清除动态路由）
export function resetRouter() {
  router.getRoutes().forEach((route) => {
    const { name } = route;
    if (name && !WHITE_NAME_LIST.includes(name as string)) {
      router.hasRoute(name) && router.removeRoute(name);
    }
  });
}

路由自动生成

路由辅助工具routeHelper.ts提供transformObjToRoute函数，将后端返回的路由配置转换为Vue Router可识别的格式：

// 动态转换路由格式
export function transformObjToRoute<T = AppRouteModule>(routeList: AppRouteModule[]): T[] {
  routeList.forEach((item) => {
    const component = (item.component as string).toUpperCase();
    if (component === 'LAYOUT') {
      item.component = LAYOUT; // 使用布局组件
    } else if (component === 'IFRAME') {
      item.component = IFRAME_BLANK; // 使用iframe组件
    } else {
      item.component = dynamicImport(item.component as string); // 动态导入组件
    }
  });
  return routeList as unknown as T[];
}

多标签页路由管理

Jeesite实现了类似浏览器标签页的路由管理功能，允许用户同时打开多个页面并自由切换，核心代码在initTabPage函数中。

标签页核心功能

添加标签页：通过addTabPage方法创建新的路由标签

window['tabPage'] = Object.assign(window['tabPage'] || {}, {
  addTabPage: async function (_$this: any, title: string, url: string) {
    // 创建新路由并添加到路由表
    const route = {
      meta: { frameSrc: url, title },
      path: path + '/' + name,
      name: 'JeeSite' + name,
      url,
    };
    addFramePage(route);
    await go(route.path);
  },

获取当前标签页：通过getCurrentTabPage访问当前激活标签页的内容窗口
关闭标签页：支持关闭当前标签页并自动切换到前一个标签页

标签页状态管理

标签页状态通过Vuex存储在multipleTab模块中，实现标签页数据的持久化和跨组件共享。

路由高级特性

路由扁平化处理

为解决深层嵌套路由导致的菜单与路由不同步问题，系统提供flatMultiLevelRoutes函数，自动将多级路由转换为二级路由：

// 将多级路由转换为二级路由
export function flatMultiLevelRoutes(routeModules: AppRouteModule[]) {
  const modules: AppRouteModule[] = cloneDeep(routeModules);
  for (let index = 0; index < modules.length; index++) {
    const routeModule = modules[index];
    if (!isMultipleRoute(routeModule)) {
      continue;
    }
    promoteRouteLevel(routeModule);
  }
  return modules;
}

路由组件动态导入

系统通过dynamicImport函数实现组件的按需加载，优化首屏加载速度：

// 动态导入组件
export function dynamicImport(component: string) {
  if (!dynamicViewsModules) {
    dynamicViewsModules = import.meta.glob('../../../../**/views/**/*.{vue,tsx}');
  }
  // 根据组件路径匹配并导入
  const keys = Object.keys(dynamicViewsModules);
  const matchKeys = keys.filter((key) => {
    // 匹配views目录下的组件文件
    const viewsPath = '/views',
      l = viewsPath.length,
      index = key.indexOf(viewsPath);
    let k = key.substring(index + l);
    const lastIndex = k.lastIndexOf('.');
    k = k.substring(0, lastIndex);
    return k === component;
  });
}

常见问题解决方案

路由权限刷新丢失

问题：刷新页面后动态路由丢失导致404
解决：在app.vue中监听页面加载完成事件，重新加载权限路由

路由嵌套过深

问题：超过3层的路由嵌套导致菜单展示异常
解决：使用路由扁平化工具自动处理，保持路由配置与菜单展示一致

同一路由参数变化不刷新

问题：路由参数变化时组件不重新渲染
解决：在路由配置中添加key属性：

<router-view :key="$route.fullPath" />

实战配置指南

路由模式切换

修改环境变量.env文件切换路由模式：

# 使用HTML5 History模式
VITE_ROUTE_WEB_HISTORY=true
# 基础路径
VITE_PUBLIC_PATH=/jeesite/

自定义路由守卫

在router/index.ts中添加全局路由守卫：

router.beforeEach((to, from, next) => {
  // 实现自定义鉴权逻辑
  const token = getToken();
  if (!token && to.path !== '/login') {
    next('/login');
  } else {
    next();
  }
});

总结与进阶

Jeesite路由系统通过模块化设计实现了路由的灵活配置与高效管理，核心优势包括：

自动化路由处理：动态导入、权限过滤、格式转换
多标签页管理：类似IDE的多页面操作体验
性能优化：路由懒加载、组件缓存、预加载策略

进阶学习建议：

深入研究路由守卫实现：guard/index.ts
学习路由状态管理：store/modules/multipleTab.ts
研究微前端路由方案：layouts/iframe/

掌握这些知识，你将能够构建出既灵活又稳定的企业级前端路由系统。

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