• 被窝暖暖嘻嘻嘻 react后台管理项目路由menu.js


    import React from 'react';
    import Loadable from 'react-loadable';
    import { Switch, Redirect } from 'react-router-dom';
    import PrivateRoute from '@/components/PrivateRoute';
    import Loading from '@/components/Loading';

    function myLoadable(fn) {
        return Loadable({
            loader: fn,
            loading: Loading,
        });
    }

    let Home = myLoadable(() => import('@/pages/Home'));
    let ButtonDemo = myLoadable(() => import('@/pages/Basic/ButtonDemo'));
    let IconDemo = myLoadable(() => import('@/pages/Basic/IconDemo'));
    let DropdownDemo = myLoadable(() => import('@/pages/Navigation/DropdownDemo'));
    let MenuDemo = myLoadable(() => import('@/pages/Navigation/MenuDemo'));
    let StepsDemo = myLoadable(() => import('@/pages/Navigation/StepsDemo'));
    let BasicForm = myLoadable(() => import('@/pages/Entry/Form/BasicForm'));
    let UploadDemo = myLoadable(() => import('@/pages/Entry/UploadDemo'));
    let TableDemo = myLoadable(() => import('@/pages/Display/TableDemo'));
    let CarouselDemo = myLoadable(() => import('@/pages/Display/CarouselDemo'));
    let CollapseDemo = myLoadable(() => import('@/pages/Display/CollapseDemo'));
    let Page403 = myLoadable(() => import('@/pages/Other/Page403'));
    let Page404 = myLoadable(() => import('@/pages/Other/Page404'));
    let Page500 = myLoadable(() => import('@/pages/Other/Page500'));
    let About = myLoadable(() => import('@/pages/About'));

    export const menus = [
        {
            title: '首页',
            icon: 'home',
            key: '/home',
            component: Home
        },
        {
            title: '基本组件',
            icon: 'laptop',
            key: '/home/basic',
            subs: [
                { key: '/home/basic/button', title: '按钮', component: ButtonDemo },
                { key: '/home/basic/icon', title: '图标', component: IconDemo },
            ]
        },
        {
            title: '导航组件',
            icon: 'bars',
            key: '/home/navigation',
            subs: [
                { key: '/home/navigation/dropdown', title: '下拉菜单', component: DropdownDemo },
                { key: '/home/navigation/menu', title: '导航菜单', component: MenuDemo },
                { key: '/home/navigation/steps', title: '步骤条', component: StepsDemo },
            ]
        },
        {
            title: '输入组件',
            icon: 'edit',
            key: '/home/entry',
            subs: [
                {
                    key: '/home/entry/form',
                    title: '表单',
                    subs: [
                        { key: '/home/entry/form/basic-form', title: '基础表单', component: BasicForm }
                    ]
                },
                { key: '/home/entry/upload', title: '上传', component: UploadDemo },
            ]
        },
        {
            title: '显示组件',
            icon: 'desktop',
            key: '/home/display',
            subs: [
                { key: '/home/display/table', title: '表格', component: TableDemo },
                { key: '/home/display/carousel', title: '轮播图', component: CarouselDemo },
                { key: '/home/display/collapse', title: '折叠面板', component: CollapseDemo }
            ]
        },
        {
            title: '其它',
            icon: 'bulb',
            key: '/home/other',
            subs: [
                { key: '/home/other/403', title: '403', component: Page403 },
                { key: '/home/other/404', title: '404', component: Page404 },
                { key: '/home/other/500', title: '500', component: Page500 },
            ]
        },
        {
            title: '关于',
            icon: 'info-circle-o',
            key: '/about',
            component: About
        }
    ];

    const MenuRoutes = () => {
        return (
            <Switch>
                {generateRoutes(menus)}
                <Redirect exact from="/" to="/home" />
            </Switch>
        );
    };

    function generateRoutes(data, result = []) {
        data.forEach((item) => {
            if (item.component) {
                result.push(<PrivateRoute exact path={item.key} component={item.component} />);
            }
            if (item.subs) {
                generateRoutes(item.subs, result);
            }
        });
        return result;
    }

    export default MenuRoutes;
  • 相关阅读:
    mysql性能调优与架构设计(一)商业需求与系统架构对性能的影响
    Android发送数据到web服务器4种方式
    Java 操作mongodb
    父子容器互相操作的方法
    Sql Server中查询当天,最近三天,本周,本月,最近一个月,本季度的数据的sql语句
    js实现多少秒后自动跳转
    插入数据返回插入的主键Id
    日期比较
    Cookie的增删改查
    js标准化价钱
  • 原文地址:https://www.cnblogs.com/bwnnxxx123/p/15635920.html
Copyright © 2020-2023  润新知