【代码分享】vue路由如何自动加载？

每次vue项目新增页面都要重新配置路由，页面多了之后就会导致router文件特别长，当然我们也可以把路由按模块来分开配置，但是始终是需要我们手动去配置，那么有没有一种方法可以减少路由的配置呢？

require.context() 为我们提供了解决方案
*require.context()*有三个参数，分别是：

1. directory:表示检索的目录
2. useSubdirectories：表示是否检索子文件夹
3. regExp:匹配文件的正则表达式,一般是文件名

 import Vue from 'vue' import VueRouter from 'vue-router'  Vue.use(VueRouter)  let routes = []  // 自动读取views文件夹下的所有vue文件 const files = require.context('../views', true, /\.vue$/) files.keys().map((item) => {   let path = item.slice(1).replace(".vue", "").toLowerCase();   // 获取组件信息   const comp = files(item).default   console.log(comp);   routes.push({     path,     name: comp.name,     component: () => import(`../views${item.slice(1)}`),   }); });  // 匹配 / 路由 routes.unshift(   {     path: '/',     name: 'Home',     component: () => import('../views/home/Home.vue'),   } ) // 当匹配不到路由时，匹配一个404页面 routes.push(   {     path: '*',     name: 'Error',     component: () => import('../views/error/index.vue'),   } ) console.log(routes);  const router = new VueRouter({   mode: "history",   routes })  export default router