vue的自动化路由+分模块管理+路由懒加载

近期单独做了一个系统项目，项目不大但是页面太多了，为了后期维护管理容易，做了个自动化加载路由以及模块化的管理。在此记录一下。

直接撸代码

1.首先看目录

router下的index.js是路由配置文件。

views下每个目录为一个模块，目录下每个pages文件夹存放页面。每个模块有一个单独的.router.js去管理。

2.先以asupmatset.router.js为例子

const arr= []; function importPages(r, arr) {   r.keys().forEach((key) => {     let _keyarr = key.split(".");     let _path = _keyarr[1];      if (_keyarr[2] === "param") {       _path = _keyarr[1] + "/:row";     }     arr.push({       path: _path,       name: _keyarr[1].substring(1, _keyarr[1].length + 1),       component: () => r(key),     });   }); } fun(require.context("./pages", true, /\.vue$/, "lazy"), arr); export default arr; 

3.再到路由文件index.js

//检索每一个模块router.js中的路由 var r=require.context("../views",true,/\.router\.js/) var arr=[]; r.keys().forEach((key)=>{   arr=arr.concat(r(key).default); })  var router = new Router({   routes: [     //加入我们拿到的arr数组     ...arr   ] })  export default router

完成