81427605 2019-06-29
在使用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 })