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.jsconst 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})