共计 940 个字符，预计需要花费 3 分钟才能阅读完成。
在使用 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
})