一种基于乾坤微前端的路由数据处理及跳转实现方法

摘要

本发明公开了一种基于乾坤微前端的路由数据处理及跳转实现方法，在微服务应用中，用户通过浏览器登录后，进入主应用路由数据处理流程；当用户点击子应用菜单时，进入子应用路由数据处理流程；当出现子应用内部直接跳转主应用的场景时，进入子应用跳转主应用流程。本发明基于乾坤微服务应用，通过在乾坤全局状态中增加全局路由数据，并绑定至props，实现主应用传递数据给子应用，当子应用路由数据变化时，通过乾坤setGlobalState方法，更新主应用全局路由数据，同时通过子应用vuex主动触发子应用路由数据的更新，实现主应用、子应用路由数据的唯一性。

说明书

技术领域

本发明涉及计算机技术领域，具体的说，是一种基于乾坤微前端的路由数据处理及跳转实现方法。

背景技术

在微服务应用中，路由数据处理及跳转尤为重要。基于乾坤微前端来说，通常包含一个主应用和多个子应用，主应用一般获取通用数据(菜单、路由、用户信息、token等)并存储转发，通常路由数据通过浏览器下发请求动态获取，再将获取后的初始数据进行封装、存储，从而实现主应用页面的正常渲染及跳转，其中主应用存储的全部路由数据称为全局路由数据，该数据包含所有微应用的路由数据；当用户点击子应用页面时，依据浏览器url的变化，通过乾坤实现机制，激活对应的子应用，在子应用页面渲染前，需要从全局路由数据中筛选出当前激活应用的路由数据，并进行封装处理，从而实现子应用页面的正常渲染及跳转。这里主要涉及主应用路由数据存储共享及子应用路由数据处理，前者一般利用乾坤props实现主子应用数据通信，通过在props中增加自定义属性，实现全局路由数据的存储及共享；后者利用子应用路由对象中约定的属性特征，从全局路由数据中筛选出子应用路由数据并封装处理。但是这种方式在子应用路由数据发生变化时，不会主动触发子应用路由数据和全局路由数据的更新，导致数据不唯一，从而在子应用内部跳转或者跨应用跳转的时候存在跳转失败的问题。

发明内容

本发明的目的在于提供一种基于乾坤微前端的路由数据处理及跳转实现方法，用于解决现有技术中路由数据处理及跳转方法中，在子应用路由数据发生变化时不会主动触发子应用路由数据和全局路由数据的更新，导致路由数据不唯一、出现跳转失败的问题。

本发明通过下述技术方案解决上述问题：

一种基于乾坤微前端的路由数据处理及跳转实现方法，在微服务应用中，用户通过浏览器登录后，进入主应用路由数据处理流程；当用户点击子应用菜单时，进入子应用路由数据处理流程，当出现子应用内部直接跳转主应用的场景时，进入子应用跳转主应用流程。

主应用路由数据处理流程具体为：

步骤A1、用户登录后通过浏览器下发请求，调用后台接口获取初始路由数据，该初始路由数据包括微服务中所有微应用的路由数据，其中每条路由数据都包括所属应用名称moduleName，对初始路由数据进行格式转换、数据封装后，得到封装后的全局路由数据，将全局路由数据通过路由实例的addRoute方法进行动态加载，实现主应用页面正常加载；

步骤A2、在主应用中利用乾坤initGlobalState方法初始化全局状态，并将全局状态绑定至乾坤属性props，目的是将主应用数据传递给子应用，其中在初始化的全局状态中增加自定义参数routers，用来存储全局路由数据，routers初始值为空数组，在主应用页面加载前，利用乾坤setGlobalState方法修改全局状态，将全局路由数据赋值给全局状态的routers，实现全局路由数据的存储。

子应用路由数据处理流程具体为：

步骤B1、子应用通过乾坤属性props获取全部的全局状态，其中包含全局路由数据；

步骤B2、在子应用vuex中动态注册globalInfo模块和routes模块，globalInfo模块用于存储全局路由数据和定义修改全局状态的方法，routes模块用于存储子应用路由数据及该数据的更新方法；具体地，在子应用vuex的globalInfo模块的状态对象state中保存全局路由数据，通过将主应用传递的全局路由数据props.routers进行赋值处理，实现全局路由数据的存储，同时在globalInfo模块中通过使用修改全局状态的方法props.setGlobalState定义全局路由数据更新方法；在子应用vuex的routes模块的状态对象state中定义routesData属性，用来保存子应用路由数据，默认为空数组，同时定义当子应用路由数据改变时更新路由的方法；

步骤B3、在子应用页面加载前，需要从全局路由数据中筛选出当前子应用路由数据，并进行封装，将封装后的数据通过路由实例的addRoute方法处理，实现路由动态加载；具体为：所述用户登录后，当点击子应用页面时，一旦浏览器url发生变化，依据乾坤实现机制，会激活某个微应用，在微应用页面渲染前，从全局路由数据中筛选出当前应用的路由数据，其筛选依据为当前激活应用的名称是否与路由数据中的所属应用名称moduleName一致，如果相同则为当前子应用路由数据，否则不做处理，这里当前激活应用的名称是通过乾坤配置微应用的参数中获取，乾坤配置微应用的参数包含应用名称、激活路径、入口和容器ID。

当子应用路由数据更新时主动触发全局路由更新，其方法具体为：当子应用路由数据更新时，首先重置globalInfo模块的状态对象state，更新当前应用中的全局路由数据，其次调用全局路由数据更新方法，全局路由数据更新方法利用乾坤setGlobalState方法修改全局路由状态，实现全局路由数据的动态更新。

当子应用路由数据变化时，vuex主动调用routes模块，首先更改state.routesData，其次调用子应用路由数据更新方法，实现子应用在不同组件之间共享同一路由数据。

子应用跳转主应用流程具体为：

步骤C1、在主应用的全局状态中增加自定义参数currentRoute，用来保存当前路由信息，同时在监听状态变更方法onGlobalStateChange中增加此参数变更的回调处理逻辑，用于在该参数发生变化时进行回调处理；

步骤C2、在子应用页面加载前完成预置条件：在子应用中设置全局方法jumpToMain，并在全局方法jumpToMain中使用setGlobalState方法，通过调用jumpToMain方法实现全局状态的修改，其中全局方法jumpToMain传入的参数为currentRoute，即主应用中自定义的全局状态；

步骤C3、当子应用页面调用jumpToMain方法，即传入currentRoute参数一旦发生变化，则会自动触发状态监听方法onGlobalStateChange，由于状态监听方法定义在主应用中，故会进入主应用，从而进入onGlobalStateChange方法的回调处理，实现子应用跳转主应用。

本发明与现有技术相比，具有以下优点及有益效果：

(1)本发明结合乾坤属性props和vuex实现主应用、子应用之间数据共享，当子应用路由数据一旦发生变化，则会通过乾坤setGlobalState方法，更新主应用全局路由数据，通过子应用vuex主动触发子应用路由的更新，实现主应用、子应用路由数据的唯一性。

(2)本发明还增加了子应用直接跳转主应用的场景(如token失效、登录超时等)的实现方法。

附图说明

图1为本发明的主应用、子应用路由数据处理示意图；

图2为主应用路由数据处理流程图；

图3为子应用路由数据处理流程图；

图4为子应用跳转主应用流程图。

具体实施方式

下面结合实施例对本发明作进一步地详细说明，但本发明的实施方式不限于此。

实施例：

结合附图1所示，一种基于乾坤微前端的路由数据处理及跳转实现方法，在微服务应用中，用户通过浏览器登录后，进入主应用路由数据处理流程；当用户点击子应用菜单时，进入子应用路由数据处理流程，当出现子应用内部直接跳转主应用的场景时，进入子应用跳转主应用流程。

主应用路由数据处理流程包括获取、封装及存储，如图2所示，具体为：

步骤A1、用户登录后通过浏览器下发请求，调用后台接口获取初始路由数据，该初始路由数据包括微服务中所有微应用的路由数据，其中每条路由数据都包括所属应用名称moduleName，对初始路由数据进行格式转换、数据封装后，得到封装后的全局路由数据，将全局路由数据通过路由实例的addRoute方法进行动态加载，实现主应用页面正常加载；

步骤A2、在主应用中利用乾坤initGlobalState方法初始化全局状态，并将全局状态绑定至乾坤属性props，目的是将主应用数据传递给子应用，其中在初始化的全局状态中增加自定义参数routers，用来存储全局路由数据，routers初始值为空数组，在主应用页面加载前，利用乾坤setGlobalState方法修改全局状态，将全局路由数据赋值给全局状态的routers，实现全局路由数据的存储。

当用户点击子应用菜单时，浏览器url发生变化，利用乾坤实现机制，激活与之匹配的子应用，同时在子应用页面加载前，需要处理子应用路由数据，包括获取、筛选、封装及更新，如图3所示，子应用路由数据处理流程具体为：

步骤B1、子应用通过乾坤属性props获取全部的全局状态，其中包含全局路由数据；

步骤B2、在子应用vuex中动态注册globalInfo模块和routes模块，globalInfo模块用于存储全局路由数据和定义修改全局状态的方法，routes模块用于存储子应用路由数据及该数据的更新方法；具体地，在子应用vuex的globalInfo模块的状态对象state中保存全局路由数据，通过将主应用传递的全局路由数据props.routers进行赋值处理，实现全局路由数据的存储，同时在globalInfo模块中通过使用修改全局状态的方法props.setGlobalState定义全局路由数据更新方法；在子应用vuex的routes模块的状态对象state中定义routesData属性，用来保存子应用路由数据，默认为空数组，同时定义当子应用路由数据改变时更新路由的方法；

步骤B3、在子应用页面加载前，需要从全局路由数据中筛选出当前子应用路由数据，并进行封装，将封装后的数据通过路由实例的addRoute方法处理，实现路由动态加载；具体为：所述用户登录后，当点击子应用页面时，一旦浏览器url发生变化，依据乾坤实现机制，会激活某个微应用，在微应用页面渲染前，从全局路由数据中筛选出当前应用的路由数据，其筛选依据为当前激活应用的名称是否与路由数据中的所属应用名称moduleName一致，如果相同则为当前子应用路由数据，否则不做处理，这里当前激活应用的名称是通过乾坤配置微应用的参数中获取，乾坤配置微应用的参数包含应用名称、激活路径、入口和容器ID。

当子应用路由数据更新时主动触发全局路由更新，其方法具体为：当子应用路由数据更新时，首先重置globalInfo模块的状态对象state，更新当前应用中的全局路由数据，其次调用全局路由数据更新方法，全局路由数据更新方法利用乾坤setGlobalState方法修改全局路由状态，实现全局路由数据的动态更新。

当子应用路由数据变化时，vuex主动调用routes模块，首先更改state.routesData，其次调用子应用路由数据更新方法，实现子应用在不同组件之间共享同一路由数据。

针对子应用内部直接跳转主应用的场景(如token失效、登录超时等)，这些场景均是在主应用实现，由于子应用不能直接跳转至主应用，本发明中在主应用配置全局状态，在该全局状态中增加自定义参数currentRoute，并在状态监听方法onGlobalStateChange中增加该参数变化的回调处理；在子应用中增加全局方法jumpToMain，在jumpToMain方法中利用setGlobalState修改全局状态，通过调用jumpToMain方法，并传入自定义参数currentRoute，一旦该参数发生变化，则会主动触发主应用中定义的全局状态监听方法onGlobalStateChange，从而进入主应用，实现从子应用跳转主应用的目的。如图4所示，子应用跳转主应用流程具体为：

步骤C1、在主应用的全局状态中增加自定义参数currentRoute，用来保存当前路由信息，同时在监听状态变更方法onGlobalStateChange中增加此参数变更的回调处理逻辑，用于在该参数发生变化时进行回调处理；

步骤C2、在子应用页面加载前完成预置条件：在子应用中设置全局方法jumpToMain，并在全局方法jumpToMain中使用setGlobalState方法，通过调用jumpToMain方法实现全局状态的修改，其中全局方法jumpToMain传入的参数为currentRoute，即主应用中自定义的全局状态；

步骤C3、当子应用页面调用jumpToMain方法，即传入currentRoute参数一旦发生变化，则会自动触发状态监听方法onGlobalStateChange，由于状态监听方法定义在主应用中，故会进入主应用，从而进入onGlobalStateChange方法的回调处理，实现子应用跳转主应用。

尽管这里参照本发明的解释性实施例对本发明进行了描述，上述实施例仅为本发明较佳的实施方式，本发明的实施方式并不受上述实施例的限制，应该理解，本领域技术人员可以设计出很多其他的修改和实施方式，这些修改和实施方式将落在本申请公开的原则范围和精神之内。