（记录笔记13）——13.2 菜单调整

调整菜单路由,使菜单精简

Github地址

一 菜单调整

1.1 接口调整

调整接口数据 : /role/list 角色列表

{
  "code": 0,
  "result": {
    "page": 1,
    "page_size": 10,
    "total_count": 25,
    "page_count": 3,
    "item_list|7": [{
      "id|+1": 1,
      "role_name": /(管理人员)|(客服专员)|(财务专员)|(市场专员)|(人力专员)|(研发)|(测试)|(系统管理员)/,
      "status|0-1": 1,
      "authorize_user_name": "@cname",
      "authorize_time": 1521270166000,
      "create_time": 1499305790000,
      "menus": ["/home", "/ui/buttons", "/ui/modals", "/ui/loadings", "/ui/notification", "/ui/messages", "/ui/tabs", "/ui/gallery", "/ui/carousel", "/ui"]
    }]
  }
}

menuConfig.js 调整

// src/config/menuConfig.js
const menuList = [
    {
        title: '首页',
        key: '/home'
    },
    {
        title: 'UI',
        key: '/ui',
        children: [
            {
                title: '按钮',
                key: '/ui/buttons',
            },
            {
                title: '弹框',
                key: '/ui/modals',
            },
            {
                title: 'Loading',
                key: '/ui/loadings',
            },
            {
                title: '通知提醒',
                key: '/ui/notification',
            },
            {
                title: '全局Message',
                key: '/ui/messages',
            },
            {
                title: 'Tab页签',
                key: '/ui/tabs',
            },
            {
                title: '图片画廊',
                key: '/ui/gallery',
            },
            {
                title: '轮播图',
                key: '/ui/carousel',
            }
        ]
    },
    {
        title: '表单',
        key: '/form',
        children: [
            {
                title: '登录',
                key: '/form/login',
            },
            {
                title: '注册',
                key: '/form/reg',
            }
        ]
    },
    {
        title: '表格',
        key: '/table',
        children: [
            {
                title: '基础表格',
                key: '/table/basic',
            },
            {
                title: '高级表格',
                key: '/table/high',
            }
        ]
    },
    {
        title: '富文本',
        key: '/rich'
    },
    {
        title: '城市管理',
        key: '/city'
    },
    {
        title: '订单管理',
        key: '/order',
        btnList: [
            {
                title: '订单详情',
                key: 'detail'
            },
            {
                title: '结束订单',
                key: 'finish'
            }
        ]
    },
    {
        title: '员工管理',
        key: '/user'
    },
    {
        title: '车辆地图',
        key: '/bikeMap'
    },
    {
        title: '图标',
        key: '/charts',
        children: [
            {
                title: '柱形图',
                key: '/charts/bar'
            },
            {
                title: '饼图',
                key: '/charts/pie'
            },
            {
                title: '折线图',
                key: '/charts/line'
            },
        ]
    },
    {
        title: '权限设置',
        key: '/permission'
    },
];
export default menuList;

1.2 路由组件调整

调整router.js 路由页面

• 1.通过Switch 语法 包裹组件,使页面路由精简.

• 2.访问 / 时重定向到 /home页面

  当能访问到页面组件时,访问对应组件, 否则,重定向到Home页面

• 增加redirect 组件

• • import {Redirect} from “react-router-dom”;
  • <Redirect to="/home"/>

// src/router.js
import React from 'react';
import {HashRouter, Route, Switch, Redirect} from "react-router-dom";
import App from "./App";
import Login from "./pages/login";
import Admin from "./admin";
import Home from "./pages/home";
import Buttons from "./pages/ui/buttons";
import Modals from "./pages/ui/modals";
import Loadings from "./pages/ui/loadings";
import Notice from "./pages/ui/notice";
import Messages from "./pages/ui/messages";
import Tabs1 from "./pages/ui/tabs";
import Gallery from "./pages/ui/gallery";
import Carousels from "./pages/ui/carousel";
import FormLogin from "./pages/form/login";
import FormRegister from "./pages/form/register";
import BasicTable from "./pages/table/basicTable";
import HighTable from "./pages/table/highTable";
import RichText from "./pages/rich";
import City from "./pages/city";
import Order from "./pages/order";
import User from "./pages/user";
import BikeMap from './pages/map/bikeMap';
import Bar from './pages/echarts/bar';
import Pie from './pages/echarts/pie';
import Line from './pages/echarts/line';
import Permission from './pages/permission';
import NoMatch from "./pages/nomatch";
import Common from "./common";
import OrderDetail from "./pages/order/detail";

export default class IRouter extends React.Component {
  render() {
    return (
      <HashRouter>
        <App>
          <Switch>
            <Route path="/login" component={Login}/>
            <Route path="/common" render={() => {
              return <Common>
                <Route path="/common/order/detail/:orderId" component={OrderDetail}/>
              </Common>;
            }}
            />
            <Route
              path="/"
              render={() => (
                <Admin>
                  <Switch>
                    <Route path="/home" component={Home}/>
                    <Route path="/ui/buttons" component={Buttons}/>
                    <Route path="/ui/modals" component={Modals}/>
                    <Route path="/ui/loadings" component={Loadings}/>
                    <Route path="/ui/notification" component={Notice}/>
                    <Route path="/ui/messages" component={Messages}/>
                    <Route path="/ui/tabs" component={Tabs1}/>
                    <Route path="/ui/gallery" component={Gallery}/>
                    <Route path="/ui/carousel" component={Carousels}/>
                    <Route path="/form/login" component={FormLogin}/>
                    <Route path="/form/reg" component={FormRegister}/>
                    <Route path="/table/basic" component={BasicTable}/>
                    <Route path="/table/high" component={HighTable}/>
                    <Route path="/rich" component={RichText}/>
                    <Route path="/city" component={City}/>
                    <Route path="/order" component={Order}/>
                    <Route path="/user" component={User}/>
                    <Route path="/bikeMap" component={BikeMap}/>
                    <Route path="/charts/bar" component={Bar}/>
                    <Route path="/charts/pie" component={Pie}/>
                    <Route path="/charts/line" component={Line}/>
                    <Route path="/permission" component={Permission}/>
                    <Redirect to="/home"/>
                    <Route component={NoMatch}/>
                  </Switch>
                </Admin>
              )}
            />
            <Route path="/order/detail" component={Login}/>
          </Switch>
        </App>
      </HashRouter>
    );
  }
}