require.context 路由的模块化和统一管理

场景，在一个项目中，有时候是两个人同时开发或者路由页面太多，路由一个页面会有大量的import，如果一个要修改，其他也要跟着修改，这时候就用到路由的模块化
初始化一个vue项目，这个项目一定要依赖webpack才能使用我们要讲的路由模块化.，主要用到require. context
1步：
在components下新建两个文件夹mode1，mode2两个文件夹
每个文件夹中新建一个mode1.route.js，mode1. index. vue，mode1. second. vue
同样另外一个文件夹中新建mode2.route.js，mode2. index. vue，mode2. second. vue
2步
在mode1. route. js中

//第一个参数是当前的目录，第二参数是否匹配子目录，第三个参数是正在匹配.vue结尾的文件
const r=require.context("../mode1",true,/\.vue/);
const arr =[];
   r.keys().forEach((key)=>{
       debugger
       const _keyarr = key.split(".");
       if(key.indexOf("index") != -1){
            arr.push({
               path: _keyarr[1],
               component: () => import(r(key).default.__file)   //webpack不同版本取值不一样，按照实际情况而定
           })
       }else{
            arr.push({
                path: _keyarr[1]+"/"+_keyarr[2],
                component: () => import (r(key).default.__file)
            })
       }

});
export default[
    ...arr    //把数组展开
]

mode2. route. js中同上

三步
在人router. js中

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const r=require.context("../components",true,/\.route\.js/);
let list: any =[];
r.keys().forEach((key)=>{
  debugger
  list = list.concat(r(key).default);
})


  const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/mode1',
    name: 'mode1',
    component: () => import(/* webpackChunkName: "about" */ '@/components/mode1/mode1.index.vue')
  },
 // ...list
]



const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router