【代码分享】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