Vue自动加载路由-蒲公英云

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
  ]
})