关于前端:代码分享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