react自动化配置路由表的实现

淡淡的烟草味﹌ 2021-10-01 12:16 348阅读 0赞

1.  创建一个这种目录按功能模块分页面
    
      
    
    
    ![18749935-6ef8d5ffaa40860b.png][]
    
    image.png
2.  每个目录均已这种形式存放文件，其中route就是本功能模块的路由列表
    
      
    
    
    ![18749935-8496c29a8599c31b.png][]
    
    image.png

export default [
      /*
       *path: 定义路由的路径
       *component: 需要展示页面路径
       *name: 本个路由的名字
       *lazy: 这个路由是否懒加载
      */
      { path: "/", component: '/home', name: "首页", lazy: true, auth: true }
    ];

1.  在view下的index.js集成路由表  
    
    
    ![18749935-2c744adac3cc9ca4.png][]
    
      
    主要通过`require`进行来读取文件里面的内容，来进行自动化导入以及配置路由表

import React, {lazy, Suspense} from 'react';
    // 这里定义的是每个功能模块的文件夹名
    export const ModularList = [
        'home',
        'blog',
        'poetry',
        'photos'
    ]
    
    let _apiObj = {}
    let _routerObj = []
    
    ModularList.map(modularName => {
        // 集成api请求
        try {
            const importInfo = require(`./${modularName}/api/index`)
            const ModularInfo = importInfo.ModularInfo || {}
            const ActionList = importInfo.default || {}
            _apiObj[modularName] = {
                ModularInfo,
                ActionList
            }
        } catch (e) {}
    
        // 集成路由
        try {
            const importInfo = require(`./${modularName}/route/index`)
            const route = importInfo.default
            route.forEach(el => {
                const component = el.lazy ? lazy(() => import(`../views/${modularName}/page${el.component || el.path}/index`)) : require(`../views/${modularName}/page${el.component || el.path}/index`).default
                _routerObj.push({
                    ...el,
                    component
                })
            })
        } catch (e) {}
    })
    export const apiObj = _apiObj
    export const routerObj = _routerObj
    export const menuObj = _routerObj.filter(el => el.menu)

1.  直接使用

import {routerObj} from '../views/index'
    console.log(routerObj)

会得到

![18749935-f370d599a91b03cc.png][]

image.png

和上次的[react实现路由守卫][react]就可以配合用了

[18749935-6ef8d5ffaa40860b.png]: /images/20210825/6921510fdde54bc8b1be907a89b89f3d.png
[18749935-8496c29a8599c31b.png]: /images/20210825/488528e22d4049dc90d4202fc475f6a3.png
[18749935-2c744adac3cc9ca4.png]: /images/20210825/c1b722077d314365b0d22b136fed86c8.png
[18749935-f370d599a91b03cc.png]: /images/20210825/9fef334c3f49466b8c4210059219db8f.png
[react]: https://www.jianshu.com/p/16f35c090706