# 本地路由配置使用指南

## 📋 概述

本工程支持两种路由配置方式：
1. **本地路由配置** - 用于开发测试阶段
2. **服务端路由配置** - 用于生产环境

## 🔧 配置切换

### 1. 修改配置文件

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

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

### 2. 重启应用

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

## 📁 本地路由配置

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

### 添加新路由

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

```javascript
{
  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'
      }
    }
  ]
}
```

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

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

## 🚀 优势

### 本地路由的优势
- ✅ 开发速度快，不依赖服务端
- ✅ 可以快速测试新功能
- ✅ 便于调试和修改
- ✅ 支持热重载

### 服务端路由的优势
- ✅ 权限集中管理
- ✅ 动态权限控制
- ✅ 生产环境安全
- ✅ 便于权限调整

## 🔄 切换回服务端路由

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

1. 修改 `USE_LOCAL_ROUTES = false`
2. 确保服务端接口正常
3. 重启应用

## 📝 注意事项

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

## 🐛 常见问题

### Q: 添加路由后菜单不显示？
A: 检查路由配置和菜单数据是否一致，确保ID、路径等字段匹配。

### Q: 组件加载失败？
A: 检查组件文件路径是否正确，确保组件文件存在。

### Q: 如何添加图标？
A: 使用Element UI的图标名称，如：`dashboard`、`user`、`setting`等。

---

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