每次vue我的项目新增页面都要重新配置路由,页面多了之后就会导致router文件特地长,当然咱们也能够把路由按模块来离开配置,然而始终是须要咱们手动去配置,那么有没有一种办法能够缩小路由的配置呢?
require.context()
为咱们提供了解决方案require.context()
有三个参数,别离是:
directory
:示意检索的目录useSubdirectories
:示意是否检索子文件夹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