vue的自動化路由+分模塊管理

近期單獨做了一個系統項目，項目不大但是頁面太多了，爲了後期維護管理容易，做了個自動化加載路由以及模塊化的管理。在此記錄一下。

直接擼代碼

1.首先看目錄

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

views下每個目錄爲一個模塊，目錄下每個pages文件夾存放頁面。每個模塊有一個單獨的.router.js去管理。

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

//.context方法檢索pages下的.vue文件。true爲如有子目錄則向下級一直檢索，false則停留當前
let r=require.context("./pages",true,/.vue/)

//定義一個空數組儲存路由對象
let arr=[];

//遍歷我們檢索到的.vue文件
r.keys().forEach((key)=>{

//進行我們的業務所需要的操作
  let _keyarr=key.split(".");
  arr.push({
    	path:_keyarr[1],
    	component:r(key).default,
    	name:_keyarr[1].substring(1,_keyarr[1].length+1),
    	meta:{
    	  login:true
    	}
    })
})

//導出我們的數組
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

完成