2.5 KiB

Raw Permalink Blame History Unescape Escape

本地路由配置使用指南

📋 概述

本工程支持两种路由配置方式：

本地路由配置 - 用于开发测试阶段
服务端路由配置 - 用于生产环境

🔧 配置切换

1. 修改配置文件

在 src/config/routeConfig.js 中修改：

// 设置为 true 使用本地路由，false 使用服务端路由
export const USE_LOCAL_ROUTES = true

2. 重启应用

修改配置后需要重启开发服务器才能生效。

📁 本地路由配置

文件位置

src/config/localRoutes.js - 本地路由组件配置
src/config/routeConfig.js - 路由控制配置

添加新路由

在 localRoutes.js 中添加路由组件：

{
  path: '/new-feature',
  component: Layout,
  redirect: '/new-feature/list',
  meta: {
    title: '新功能',
    icon: 'star'
  },
  children: [
    {
      path: 'list',
      name: 'NewFeatureList',
      component: () => import('@/views/newFeature/index'),
      meta: {
        title: '功能列表',
        icon: 'list'
      }
    }
  ]
}

在 routeConfig.js 中添加菜单数据：

{
  id: 5,
  name: '新功能',
  path: '/new-feature',
  url: '#',
  icon: 'star',
  children: [
    {
      id: 51,
      name: '功能列表',
      path: '/new-feature/list',
      url: '/new-feature/list',
      icon: 'list'
    }
  ]
}

🚀 优势

本地路由的优势

✅ 开发速度快，不依赖服务端
✅ 可以快速测试新功能
✅ 便于调试和修改
✅ 支持热重载

服务端路由的优势

✅ 权限集中管理
✅ 动态权限控制
✅ 生产环境安全
✅ 便于权限调整

🔄 切换回服务端路由

当需要切换到服务端路由时：

修改 USE_LOCAL_ROUTES = false
确保服务端接口正常
重启应用

📝 注意事项

组件路径：确保组件文件路径正确
路由名称：路由名称必须唯一
图标配置：图标名称需要与Element UI图标库匹配
权限控制：本地路由默认所有角色都可访问

🐛 常见问题

Q: 添加路由后菜单不显示？

A: 检查路由配置和菜单数据是否一致，确保ID、路径等字段匹配。

Q: 组件加载失败？

A: 检查组件文件路径是否正确，确保组件文件存在。

Q: 如何添加图标？

A: 使用Element UI的图标名称，如：dashboard、user、setting等。

更多问题请参考代码注释或联系开发团队

2.5 KiB Raw Permalink Blame History Unescape Escape