前端页面自动遍历文件夹生成路由

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

views文件夹下添加页面后需手动修改路由文件、注册路由才能正常显示页面。每次新增页面都要去修改路由文件太麻烦，可以直接在路由文件中使用require.context()方法导入所有页面文件，拿到文件之后，遍历文件名注册组件，这样以后新增页面的时候就不用再去修改路由文件了。

一、注册路由

1. 项目目录结构图：

2. 在router文件夹下新建router.js文件，在router/index.js中引入router.js文件并注册路由。

router/index.js页面：

import Vue from "vue";
import Router from "vue-router" // 引入router
import staticRouter from "./router"; // 引入router.js文件

Vue.use(Router) // 注册路由插件

export default new Router({
    routes: staticRouter
})

3. 在main.js中引入路由，并初始化。

main.js文件:

import Vue from 'vue'
import App from './App.vue'
import router from '@/router/index'; // 引入
Vue.config.productionTip = false;

new Vue({
  router, // 初始化
  render: h => h(App),
}).$mount('#app')

二、自动生成路由配置表

1.使用require.context()方法导入文件目录

require.context(directory,useSubdirectories,regExp)

参数：
directory：要检索的目录

useSubdirectories：是否检索子文件夹
（如果选择false，只能检索子文件，不会检索子文件夹。当前目录里只有文件夹的话，会导致什么都检索不到）

regExp：匹配文件的正则表达式,一般是文件名

const fileName = require.context('../views',true,/^\.\/[a-zA-Z0-9]+$/);
 // /^\.\/[a-zA-Z0-9]+$/ 匹配字符 ==>  ./开头+数字/字母结尾  ==>  如：./program124，类型数据
console.log('fileName=====',fileName); 
// fileName===== ƒ webpackContext(req) {
	// var id = webpackContextResolve(req);
	// return __webpack_require__(id);
// }
console.log('fileName.keys======',fileName.keys()); 
// fileName.keys====== ['./program1', './program10', './program2', './program3', './program4', './program5', './program6', './program7', './program8', './program9', './programA', './programText']

拿到views文件夹下所有子文件夹名字之后，就可以遍历生成前端路由。
这里要注意文件是按字母和数字的先后顺序排列的，名称里面带数字的，会按数字从小到大排序

2.注册layout父路由

当前项目使用了layout组件，在layout中点击按钮可以切换页面，所以需要注册layout组件为路由父路由，在layout父路由下面挂载子路由页面。

layout.vue文件如下：

<template>
  <div class="layout">
    <div>
      <router-link v-for="(item,index) in butNum" :key="index" :to="item.replace('./','')" :class="{'active': $route.name === item.replace('./','')}">{{ item.replace('./','') }}</router-link>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  data() {
    return {
     butNum: []
    }
  },
  created() {
     const fileName = require.context('@/views', true, /^\.\/[a-zA-Z0-9]+$/);
     this.butNum = fileName.keys()
  }
}
</script>
<style lang="less" scoped>
a {
  display: inline-block;
  padding: 5px 15px;
  height: 30px;
  margin: 10px;
  line-height: 30px;
  text-align: center;
  text-decoration: none;
  color: #262626;
  background-color: #f5f5f5;
}
.active {
  background-color: #ffae43;
}
</style>

router.js中注册父路由：

const staticRouter = [{
    path:'/',
    redirect:'/index',
    name:'index',
}]

let layout = {
    path:'/index',
    name:'index',
    component: () => Promise.resolve(require("@/components/XLayout.vue").default),
    children:[{
        path:'/',
        redirect:'/program1',
        name:'program1',
    }]
}

3.遍历生成页面路由

注册完父路由之后，导入views文件夹，拿到views下子文件夹的名字，进行页面子路由的注册。
router.js中注册子路由：

const fileName = require.context('@/views',true,/^\.\/[a-zA-Z0-9]+$/);
fileName.keys().forEach(item=>{
    layout.children.push({
            path:item.replace('.',''), // item第一项为：'./program1',去掉.之后生成path路径
            name:item.replace('./',''),
            component: () => Promise.resolve(require(`@/views/${item.replace('./','')}`).default) // 使用模板文字异步引入对应组件
        })
})
console.log(layout,'1111'); // 打印结果如下图绿色框内容所示
staticRouter.push(layout) // 将layout子路由添加到父路由中

export default staticRouter // 将完整路由表暴露出去，在router/index.js中导入并生成路由

控制台打印数据：

三、router.js页面完整代码

const fileName = require.context('../views',true,/^\.\/[a-zA-Z0-9]+$/);
console.log('fileName=====',fileName);

const staticRouter = [{
    path:'/',
    redirect:'/index',
    name:'index',
}]

let layout = {
    path:'/index',
    name:'index',
    component: () => Promise.resolve(require("@/components/XLayout.vue").default),
    children:[{
        path:'/',
        redirect:'/program1',
        name:'program1',
    }]
}
console.log('fileName.keys======',fileName.keys()); 
// ['./program1', './program10', './program2', './program3', './program4', './program5', './program6', './program7', './program8', './program9', './programText']
fileName.keys().forEach(item=>{
    layout.children.push({
            path:item.replace('.',''),
            name:item.replace('./',''),
            component: () => Promise.resolve(require(`@/views/${item.replace('./','')}`).default)
        })
})

staticRouter.push(layout)
console.log(layout,'1111');

export default staticRouter

总结

最主要的就是在router.js中遍历生成子路由，并添加进父路由下面。
然后在layout.vue页面也拿到文件名，遍历生成跳转的路径。之后在views下添加其他文件夹，就不用修改路由文件了。