Vue路由模块化配置的完整步骤

前言

企业运营后台页面很多，路由如若不区分模块化配置，所有路由挤在同一个文件将不好维护，所以路由的配置也要模块化

分享两个解决方案—— Vue路由配置的模块化（方案一和方案二)

注册需要

首先路由注册需要啥

//main.jsnew Vue({ el: '#app '，路由器，商店，组件： { App }，模板： 'App/'})//这里的路由器是这样的导出默认的新路由器({ mode: 'history '，routes: []，//其他配置})也就是说注册需要新的一个路由器实例，实例里的路线是数组，里面配置每个页面的路由

模块拆分（方案一)

科学研究委员会下路由器的目录结构

- src -路由器-模块- xxxx.js //模块xxx - other.js //模块other - index.js //路由配置入口和出口指数

例如

然后配置模块里面模块路由

//配置其他导入来自“@/view/others/err”。vue的导出默认功能(路由器){ router。push({ path : '/error '，name: 'error '，component: err })}//配置会计报告导出默认功能（路由器){路由器。push({ path : '/accout-report '，重定向： '/accout-report/list ' })//列表路由器。push({ path : '/account-report/list '，name: 'list '，component :()=import(@/view/account report/list)。vue ')})//新增路由器。push({ path : '/account-report/create '，name: 'create '，component :()=import(@/view/account report/create)。vue ')})//编辑路由器。push({ path : '/account-report/edit/: id '，name: 'edit '，component :()=import(@/view/account report/steps/create step 2。vue ')})//详情路由器。push({ path : '/account-report/detail/: id '，name: 'detail '，component :()=import(' @/view/account report/detail。vue’)})如有其他模块，依次像上面一样配置

关键是路由配置入口出口文件index.js

//索引。jsimport Vue从' Vue '导入Router从' Vue-Router '导入App从' @/查看/布局。Vue '从' @/Router/modules/others '导入其他路由器'从' @/Router/modules/account report '导入帐户报告'/从' @/stores ' Vue '导入存储。使用(Router)let routes=[]let root Router={ path : '/'，component: App，children 3360[]，重定向3360 '/帐户如有多个模块，依次在这里配置const Router=new Router({ mode : ' history '，routes : routes。concat([根路由器，重定向路由器]))})导出默认路由器上述代码，除了其他，所有页面路由配置在根路由器的孩子们下面，有一个父级路由器包裹着代码都看得懂，这里就不多说哈~

最后在main.js中注册

模块拆分（计划二)

该方法较为难懂一些，可以看看

目录结构跟计划一类似，不过在科学研究委员会下多了一个router.js配置文件作为路由出口文件

科学研究委员会下路由器的目录结构

- src -路由器-模块- xxxx.js //模块xxx - other.js //模块other - index.js //路由配置中转文件- router.js //路由配置出口文件

例如

模块模块里文件配置

//订单。jsimport { getfindsbusinessservicelist }从' @/utils/config-utils ' const order router=[{ path : '/'，重定向： '/cost/order-List ' }，{ path 3: '/cost '，组件：()=import(' @/view/Layouts ')，重定向3: '/cost/order-List '，子项3:[{ path 33: ' order-List '，组件3:()]进入该路由前异步请求，结束后进入该路由next() } }，{ path: 'order-detail '，组件：()=import(' @/view/order management/Detail ')}，//下面是重定向，可不配置{ path: 'orderDetail '，redirect: 'order-detail' }，{ path: 'order '，redirect : ' order-list ' }]}]导出默认订单路由器上述路由配置在布局路由下的孩子们

接下来关键，路由配置中转文件index.js

遍历模块文件夹下的每个模块文件，赋值和导出

//index.jsimport { camelCase }来自“lo dash-es”常量必需模块=必需。上下文(' ./modules '，false，/\ .js$/)const路由器={ }需要模块.密钥().forEach(fileName={ //不加载index.js if (fileName===' ./index.js)返回/转为驼峰命名const ModuleName=camel case(文件名。替换(/(\).\/|\.js)/g ' '))路由器[模块名称]=必需的模块(文件名).默认| |必需模块(fileName)})导出默认路由器然后在科学研究委员会下的出口文件router.js包装

//路由器。从' Vue '导入路由器从' Vue-Router '导入路由器从' @/路由器/索引' Vue导入路由器。使用(路由器)让路由器=[]对象。值(路由器).forEach(路由器={ routes.push(.路由器)})导出默认的新路由器({ mode: '历史记录，路由})最后在main.js中注册

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对我们的支持。