vue-router 模塊化

在使用vue開發中，前期經常會將全部的路由寫在一個文件中。可是當項目過大的時候，會面臨路由文件過程，難以維護的問題。經過webpack的require.context()函數，能夠自動導入vue-router模塊。

1.分割路由文件

router                           // 路由文件夾
  |__index.js                    // 路由組織器：用來初始化路由等等
  |__modules                     // 業務邏輯模塊：因此的業務邏輯模塊
        |__index.js              // 自動化處理文件：自動引入路由的核心文件
        |__a.js                  // 業務模塊a
        |__b.js                  // 業務模塊b
        |__c.js                  // 業務模塊c

2.modules文件夾

modules文件夾中存放着全部的業務模塊與自動化引入的index.js。業務模塊內容根據具體業務自行編寫。本文代碼僅爲示例。

//    a模塊
export default [
    {
        path: '/a',
        name: 'A',
        component: A,
        meta: {
            name_str: '首頁'
        }
]

自動化導入模塊index.js

const manageFiles = require.context('.', true, /\.js$/)

console.log(manageFiles.keys()) // ['./a.js'] 返回一個數組，包含所有文件名
let configRouters = []
manageFiles.keys().forEach(key => {
  if (key === './index.js') return //    若是是當前文件，則跳過
  configRouters = configRouters.concat(manageFiles(key).default) // 讀取出文件中的default模塊
})
export default configRouters // 拋出一個Vue-router期待的結構的數組

路由初始化

import Vue from 'vue'
import VueRouter from 'vue-router'
import RouterConfig from './modules' // 引入業務邏輯模塊
Vue.use(VueRouter)


export default new VueRouter({
  scrollBehavior: () => ({ y: 0 }),
  routes: RouterConfig
})