详解Vue.js项目API、Router配置拆分实践_vue.js_脚本之

来源:http://www.chinese-glasses.com 作者:Web前端 人气:183 发布时间:2020-05-06
摘要:时间: 2019-09-08阅读: 153标签: 路由前言 前后端分离开发方式前端拥有更高的控制权 本文启发自实际项目中,随着项目不断增长,页面越来越多,不得不把vue-router的路由管理 化繁为简 、

时间: 2019-09-08阅读: 153标签: 路由前言

前后端分离开发方式前端拥有更高的控制权

本文启发自实际项目中,随着项目不断增长,页面越来越多,不得不把vue-router的路由管理化繁为简逐渐自动化的一个过程,希望能引发大家的思考;

随着前端框架技术的飞速发展,Router这个概念也被迅速普及到前端项目中,在早期前后的没有分离的时期下,并没有明确的路由概念,前端页面跳转大多是通过后端进行请求转发的,比如在Spring MVC项目中,进行一个页面跳转如下:

顺理成章的路由管理方式

前端需要一个超链接,链接的href=/manager,这样这个超链接被转发到scs/waitFollowed路径指定的页面。

在一个Vue + Vue-Router的单页应用中,我们一般会在一个js文件中统一管理我们的页面,具体如下:

前后的分离后,前端页面跳转的方式发生了变化,不再需要后端处理了,数据交换方式也改变了,由此前端需要定义Router配置文件,需要定义API配置文件。在项目的权限配置管理中,完全不需要后端什么事了,可以说,权限配置表可以单独拿出来由前端维护了。

const routes = [{ path: '/page-one/index', component: () = import('./pages/page-one/index'), meta: { title: 'page-one-index' }}, { path: '/page-one/sub-page', component: () = import('./pages/page-one/sub-page'), meta: { title: 'page-one-sub-page' }}, { path: '/page-two/index', component: () = import('./pages/page-two/index'), meta: { title: 'page-two-index' }}, { // 其他页面...}];export default new VueRouter({ routes });

比如这个url字段,在前后端不分离的情况下,严重依赖于后端,url就是后端接口地址,如果需要更改就需要后端修改代码修改接口地址,而现在,前端可以自由控制url的值是什么了。

这种方式的优点就是能集中化的管理页面;而10bet,缺点也是明显的,随着项目规模越来越大,单个js会管理大量的页面路由,维护起来有一定的困难。

在接口层面,前端也会有自己的配置文件,可以对后端提供的接口进行重命名,组合等。比如

拆分与聚合

前端都统一使用模块名+接口名的方式管理,管后端提供的接口叫啥已经不重要,在视觉上和维护上都比较方便。在页面上使用,查询起来也很直观:

既然大量的页面路由在单个js文件维护存在困难,那不如就路由根据业务进行拆分管理,每个业务对应的页面由其对应的路由文件来管理,然后在总的路由文件中再聚合各业务的路由文件。

看到DISTRBUTE().Leads.dataGrid这个接口,就知道这是DISTRBUTE模块下Leasd功能下的列表查询接口

// page-one-router.js// page-one管理的路由文件export default [{ path: '/page-one/index', component: () = import('./index'), meta: { title: 'page-one-index' }}, { path: '/page-one/sub-page', component: () = import('./sub-page'), meta: { title: 'page-one-sub-page' }}];

// page-two-routes.js// page-two管理的路由文件export default [{ path: '/page-two/index', component: () = import('./index'), meta: { title: 'page-two-index' }}]

Vue.js中的API、Router配置

上面的page-one、page-two两个模块是拆分出来的路由管理文件,下面的js是聚合这两个模块的总路由管理文件。

在Vue.js项目下,一开始我们只使用一个api.config.js配置文件,所有的接口都定义在这里面,router也一样,都配置在一个router.config.js中,下面是我们项目中API配置文件

// root-router.js// 总路由管理文件let routes = [];[ 'page-one', 'page-two'].forEach(m = routes = routes.concat(require(`./pages/${m}/router`).default));export default new VueRouter({ routes });

可以看到,很多的业务模块,很多的接口,已经达到了570多行,随着业务进一步推进,接口快速膨胀,文件越来越大。

到这里,这个优化看起来已经好多了,有新增的业务只需要新增业务对应的router.js文件,然后再将业务注册到root-router.js即可。但是我们能不能再优化呢,当前方案再每次新增的时候,都需要改两个地方;答案是肯定的,我们还可以优化。

这时候迫切需要拆分,把不同的业务模块单独拆分为一个个API配置文件。同样,我们来看看拆分前的Router配置文件:

自动化方案

这样router一多最大的缺点就是会导致router命名冲突。

Webpack4中提供了require.context()以通过正则匹配引入对应的模块

拆分!拆分!拆分!

require.context(directory, useSubdirectories =false, regExp =/^.//);

首先考虑API配置文件怎么拆分,对于接口,我们肯定有多套环境,多套环境那么API的URL也不一样,拆分成多个文件后多个文件需要共用同一个获取apiBase的方法,所以这个apiBase就要写在公共的地方,在这里原来的api.config.js就变成了公共配置,apiBase就放在此文件内。

本文由10bet发布于Web前端,转载请注明出处:详解Vue.js项目API、Router配置拆分实践_vue.js_脚本之

关键词:

最火资讯