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 目錄下便可
<script>
export default {
  _route: {
    path: "/",
    redirect: "/login"
  }
};
</script>

或者重寫默認配置

固然這個require.context API 還能作其餘的事情，好比自動全局註冊組件（vue官方文檔）

好比自動幫你加載js模塊

我就不一一介紹了，請老闆們自行研究。

關於自動初始化路由的問題，有什麼意見或建議歡迎你們指出並討論
ღ( ´･ᴗ･` )