一次性引入路由

如果我们在做一个比较大型的项目，一个模块下面也有许多子路由，当业务量多，功能复杂，这样直接在route.js中注册路由，会造成route.js非常庞大和繁杂，此时可以利用require.context解决。思路：将每个比较大比较多的模块路由单独出来，这样就形成一个一个模块功能的路由，然后在route.js中解构。 login.routes.js

export default{
    path:'./login'
    name:'login',
    component:()=>import("../views/index.vue"),
	children:[]
}

index.routes.js

export default{
    path:'./index'
    name:'index',
    component:()=>import("../views/index.vue"),
	children:[]
}

以上是两个模块功能单独出来的路由，在route.js中，写完主体路由，将单独出来的模块路由解析出来之后通过解构注册到路由中

const routerList=[]
function importAll(r){
	r.keys().forEach(key=>{
		routerList.push(r(key).default) //r(key).default就相当于每个模块如login.routes.js 中export default里面的内容 
	})
}
importAll(require.context('../router',true,/\.router\.js/))//查找router文件夹以及它的子目录下以.routes.js结尾的文件
const routes=[
	{
		path:'/',
		name:"home",
	}
	...routerList,
	{
		path:'/add',
		name:"add",
	}
]

这样写完之后，就可以正常使用route了