实现根据文件目录自动生成路由（新增页面免修改router/index.js）

可以采用webpack里的require.context(directory,includeSubdirs,filter,mode)方法 https://webpack.js.org/api/module-methods/#requirecontext，来实现：

image.png

这里有个要注意的地方就是默认require.context采用的是同步的方式，如果想用异步的方式记得在第四个参数中传递lazy实现异步懒加载；其支持keys、resolve及id 参数：https://webpack.docschina.org/guides/dependency-management/#context-module-api

image.png

// 懒加载
const requireAllVueComponents = require.context('../components/autoRouter', true, /\.vue$/, 'lazy');
// 非懒加载
// const requireAllVueComponents = require.context('../components/autoRouter', true, /\.vue$/);
const routerList = [];

requireAllVueComponents.keys().forEach((allVueComponentItem) => {
  // console.log(allVueComponentItem, 'allVueComponentItem')
  // (function (allVueComponentItem) {
  const completeName = allVueComponentItem.match(/\w+\.vue$/, '')[0];
    // 文件名尾部有数值的情况下 自动注入路由
    // 尾部数值为1表示超管权限 2表示管理员 3 表示普通用户
  if (completeName.match(/\d\.vue$/g)) {
    const routerObj = {};
    let permissionNum = 0;
    routerObj.path = allVueComponentItem.replace(/\./, 'autoRouter').replace(/\d\.vue$/, '/:id')
    routerObj.name = completeName.replace(/\d\.vue$/, '');
    // console.error('allVueComponentItem.replace(/\\.\\//, \'../components/点点滴滴/\')', allVueComponentItem.replace(/\.\//, '../components/autoRouter/').replace(/\.vue$/, ''))
    // const componentName = allVueComponentItem.replace(/\.\//, '../components/autoRouter/').replace(/\.vue$/, '');
    // console.error('componentName', componentName)
      // routerObj.allVueComponentItem = allVueComponentItem
      // console.error('completeName', completeName)
    // 一、懒加载的实现
    // routerObj.component = () => requireAllVueComponents(allVueComponentItem)
    routerObj.component = () => requireAllVueComponents(allVueComponentItem).default || requireAllVueComponents(allVueComponentItem)


    // 二、非懒加载--同步的实现
    // routerObj.component = requireAllVueComponents(allVueComponentItem).default || requireAllVueComponents(allVueComponentItem)

    routerList.push(routerObj)
  }
})

再将routerList 放置在routes里即可

const router = new Router({
  routes: [...routerList]
})

另一个用途：
https://cn.vuejs.org/v2/guide/components-registration.html#%E5%9F%BA%E7%A1%80%E7%BB%84%E4%BB%B6%E7%9A%84%E8%87%AA%E5%8A%A8%E5%8C%96%E5%85%A8%E5%B1%80%E6%B3%A8%E5%86%8C

最后编辑于：2019.11.28 19:08:26