前言
我们在vue中配置路由时如果路由较少,可以直接在router/index.js中配置,但如果涉及项目较大,模块较多,如果在index.js直接写会导致文件较大,扩展性差, 且维护困难等问题,那么我们就可以将路由进行模块化处理
解决方案
将不同模块下的路由写在不同的文件中导出,然后在index.js文件中引入,如下图所示:
index.js文件中引入所有modules下的路由文件
import Vue from "vue"
import Router from "vue-router"
// 解决路由重复
const VueRouterPush = Router.prototype.push
Router.prototype.push = function push(to) {
return VueRouterPush.call(this, to).catch(err => err)
}
// 声明你的主路由
export let constantRoutes = [
{
path: "/",
name:"home:,
component: Layout,
order:9999
}
]
// 模块文件处理,将modules下的所有js文件读取出来,并生成数组
const modulesFiles = require.context("./modules", true, /\.js$/)
const modules = modulesFiles.keys().reduce((prev, cur) => {
prev.push(modulesFiles(cur).default)
return prev
}, [])
//然后加入到主路由中
constantRoutes = [...constantRoutes , ...modules ]
//还可以根据order由大到小进行路由排序使路由顺序可以更改
constantRoutes = constantRoutes.sort((a, b) => {
return (a?.meta?.order || 9999) - (b?.meta?.order || 9999)
})
const router = new Router({
routes: constantRoutes,
mode: "history"
})
Vue.use(Router)
export default router
按照此方法,我们还可以将全局组件注册,vue插件开发等都进行模块化处理,无需一个一个单独注册或单独引入