调整菜单路由,使菜单精简
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>
);
}
}