在很多Vue项目中,所有的路由管理都放在一个route.js文件中。当项目庞大,页面路由越来越多的情况下,路由的维护成本越来越高,很容易出现问题。
理想状态是,可以实现路由的去中心化,即:每个模块拥有自己的route.js,单独管理本模块下的路由。
首先,我们用到webpack的一个api:require.context
:
require.context 函数可以获取一个特定的上下文,主要用来实现自动化导入模块,如果遇到从一个文件夹引入很多模块的情况,可以使用这个api,它会遍历文件夹中的指定文件,然后自动导入,使得不需要每次显式的调用import导入模块。
require.context函数接受三个参数:
1.directory {String} -读取文件的路径
2.useSubdirectories {Boolean} -是否遍历文件的子目录
3.regExp {RegExp} -匹配文件的正则
例如:
//遍历当前目录下的test文件夹的所有.test.js结尾的文件,不遍历子目录
require.context('./test', false, /.test.js$/);
其次,我们需要拿到require.context
返回的内容
function importRoutes