来自 Web前端 2020-04-29 17:43 的文章
当前位置: 网上澳门金莎娱乐 > Web前端 > 正文

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

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

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

// 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' }}]
export function apiBase() { let hostname = window.location.hostname, API_BASE_URL = 'http://test2api.dunizb.com';//默认环境 if(hostname === 'crm.dunizb.cn') { //正式环境 API_BASE_URL = 'http://api.dunizb.cn'; } else if(hostname === 'admin.dunizb.com') {//公网测试环境 API_BASE_URL = 'http://testapi.dunizb.com'; } else if(hostname === 'manager.dunizb.com') {//内网测试环境 API_BASE_URL = 'http://test2api.dunizb.com'; } return API_BASE_URL;}
require.context(directory, useSubdirectories =false, regExp =/^.//);

具体功能API不需要更改,直接拷贝相应模块API到子模块API配置文件即可。

具体的介绍可以参考官方文档所以我们可以修改root-router.js`路由加载的逻辑如下:

拆分思路也完全一样,但要保证只有一个router.start即:

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

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

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

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

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

Router的拆分稍微复杂一点,拆分后的文件目录与API的目录相同:

网上澳门金莎娱乐,Webpack4中提供了require.context()以通过正则匹配引入对应的模块

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

顺理成章的路由管理方式

return router.start;

directory:检索的目录useSubdirectories:是否检索子目录regExp:匹配文件的正则表达式

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

let routes = [];// auto import route.js(modules = modules.keys().forEach((key) = { routes = routes.concat(modules(key).default);}))(require.context('./pages/', true, /router.js$/));export default new VueRouter({ routes });
/** * 教学排课 * 教研 * Created by Bing on 2017/6/19 0019. */import courseIndex from 'components/studyCourse/index/index';import waitCourse from 'components/studyCourse/waitCourse/waitCourse';import alreadyCourse from 'components/studyCourse/alreadyCourse/alreadyCourse';import gearCourse from 'components/studyCourse/waitCourse/gearCourse';import courseWare from 'components/teachingResearch/courseware/courseware.vue';import courseWareLibrary from 'components/teachingResearch/courseware/library.vue';export default function { router.map({ '/study/index': {component: courseIndex}, '/study/waitCourse': {component: waitCourse},//待排课程 '/study/waitCourse/gearCourse': {component: gearCourse},//待排 '/study/course': {component: alreadyCourse},//已排课程 '/tr/courseware': {component: courseWare},//课件管理 '/tr/courseWare/library': {component: courseWareLibrary},//自主上传课件库 });}

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

拆分后,每个模块管理它自己领域的router、api,router.config.js和api.config.js就大大瘦身了,也降低了命名冲突的问题和将来混乱的问题。

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

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

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

Vue.js中的API、Router配置

虽然这只是一个小小的优化,但是在优化过程中体现了工程化的一个目的,就是尽量减少人工操作,降低维护成本

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文由网上澳门金莎娱乐发布于Web前端,转载请注明出处:详解Vue.js项目API、Router配置拆分实践_vue.js_脚本之家

关键词: