Vue自动加载路由

每次创建页面之后，都需要手动引入模块，创建路由，很麻烦。
这里使用webpack中的require.context来实现创建页面之后，自动加载路由。
同时，因为编写加载路由设定了部分规则，只有遵守该规则才能将路由加载进去，有助于团队命名规范的限制。

require.context

用于自动加载某一目录下，符合我们自定义规则的文件

项目结构

子路由编写

index.route.js

/**
 * require.context
 * 返回一个方法
 * 第一个参数为需要查找的目录
 * 第二个参数为是否需要遍历子文件夹
 * 第三个参数为自定义规则
 */
var r = require.context('./pages',true,/.vue/);
var arr = [];
//获取引入的资源['./mode1.index.vue','./mode1.second.vue']
r.keys().forEach((key)=>{
    var _keyArr = key.split(".");
    if(key.indexOf("index")!=-1){
        arr.push({
            path:_keyArr[1],
            component:r(key).default //key对应的组件
        })
    }else{
        arr.push({
            path:_keyArr[1]+"/"+_keyArr[2],
            component:r(key).default

        })
    }
})
export default arr;

总路由编写

router/index.js

import Vue from 'vue'
import Router from '../myrouter'

Vue.use(Router)

var r = require.context("../components",true,/\.route\.js/)
var arr = [];
r.keys().forEach((item)=>{
  arr = arr.concat(r(item).default);
})
export default new Router({
  mode: "hash",//模式
  routes: [
    ...arr
  ]
})

结果展示