cli3自动载入文件功能应用，自动初始化路由

手写路由是件有点坑的事情，特别是初次接触路由的朋友。
下面分享一个自动初始化路由的方法（需要cli3+）
首先 路径大概是这样放的

我们的目的是让路由自动注册pages 目录下的文件，注册的址默认就是./pages/下文件的相对地址。
拿这个举例，大概是这样：

import index from '@/pages/index.vue'
import home_home from '@/pages/home/home.vue'
// 应该还有个@/pages/home.vue文件。这里只是演示，我就偷懒了
routes:[{
    path:'/index',
    component: index,
    name: 'index'
},{
    path:'/home/',
    children:[{
        path:'/home/home',
        component: home_home,
        name: 'home_home'
    }]
}]

要自动加载路由 首先要让脚手架自动读取文件，要用的核心api 是cli3+才支持的 require.context；
下面直接上代码

// ./router.js
import Vue from 'vue'
import Router from 'vue-router'

const routesMap = new Map(),
  pageList = require.context(
    './', // 指定查找文件的路径
    true, // 是否继续查找子路径
    /^(\.\/pages).*(\.vue)$/ // 文件名的正则筛选，这里查找'./pages/'目录面下的所有'.vue'文件
  ), // 这里返回的是一个方法合集
  turnArr = (mapArr) => {
    return Array.from(mapArr.values()).map((i) => {
      i.children && (i.children = turnArr(i.children))
      return i
    })
  };// 声明一个把Map转成数组的方法，后面遍历转换需要
Array.from(pageList.keys()) // pageList.keys 返回所有符合的文件路径
  .map(i => [i, ...i.replace(/^(\.\/pages\/)/, '').replace(/(\.vue)$/, '').split('/')])
  .sort((a, b) => a.length - b.length)
  .forEach((pathArr) => {
    // pageList(文件路径) 返回指定文件 export 的内容。这里的 default 当然就是 export default 的内容=>我们的组件了
    let component = pageList(pathArr.shift()).default, 
      defaultName = pathArr.join('_'),
      tarName = pathArr.pop(),
      childrenArr = pathArr.reduce((re, i) => {
        if (!re.get(i)) {
          // eslint-disable-next-line
          console.warn('地址%s没有指定控件', i) // 讲道理必须有同名父辈路由才能有子路由，但是你也可以不讲道理
          re.set(i, {
            path: `/${i}/`
          })
        }
        if (!re.get(i).children) {
          re.get(i).children = new Map()
        }
        return re.get(i).children
      }, routesMap);
    // 这里初始化页面路由的配置，vue文件下的 _route 会浅覆盖默认配置
    childrenArr.set(tarName, Object.assign({
      name: defaultName,
      component,
      path: `/${[...pathArr, tarName].join('/')}`
    }, component._route || {}))
  })// 这里考虑到子路由的嵌套，所以用Map对象（方便深层嵌套子路由的时候查找上一级路由）
Vue.use(Router)
const router = new Router({
  mode: 'history',
  routes: turnArr(routesMap),// routes 是可以接收Map对象，但是children不可以接收Map对象。所以还是要全部转换成数组格式
})

export default router

这样基本上就不用再编写路由了，路由的嵌套直接通过文件路径来解决。比如index下要嵌套一个foo 和 boo 子路由。直接创建一个同名文件夹index 把foo 和 boo 放在index文件夹下即可。

上面有提到过vue文件下的_route对象会覆盖默认的配置，我们就可以通过这种方式来 添加重定向。

//redirect.vue 直接放在pages 目录下即可

或者重写默认配置

当然这个require.context API 还能做其他的事情，比如自动全局注册组件（vue官方文档）

比如自动帮你加载js模块

我就不一一介绍了，请老板们自行研究。

关于自动初始化路由的问题，有什么意见或建议欢迎大家指出并讨论
ღ( ´･ᴗ･` )