每次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