[发明专利]一种页面组件跳转方法及装置

说明书

本申请涉及数据处理技术领域，特别涉及一种页面组件跳转方法及装置。该方法包括：监测用户触发的页面组件选择指令；在监测到用户触发的目标页面组件选择指令时，基于所述目标页面组件选择指令，确定所述目标页面组件对应的唯一标识；基于所述唯一标识进行路由跳转，加载显示所述目标页面组件。

技术领域

本申请涉及数据处理技术领域，特别涉及一种页面组件跳转方法及装置。

背景技术

Web管理系统页面的框架布局一般都有固定的结构和模板。现在国内很多管理系统页面都采用Tab选项卡的框架布局，左侧是导航栏，点击对应的页面进入相应的tab页面，左树右内容展示也是管理系统页面常见的布局。目前，前端的主流框架是Vue、React和Angular，Vue的使用人数排在了第一。Vue及其周边生态技术学习成本低、生态繁荣，使其成为当下热门的轻量级前端框架。

相关技术中，常见的页面组件跳转的实现思路是：使用v-if和一个变量来控制当前页面显示哪个组件，同时用该变量来控制Tree树的节点、Tab标签的选中和路由的跳转。例如，点击Tree树的节点，根据节点上属性的值得知需要展示页面的名字，根据该名字进行路由跳转、Tab标签切换、页面展示；或者，切换Tab标签，根据标签上属性的值得知需要展示页面的名字，根据该名字进行路由跳转、Tree树节点的选中、页面展示；或者，刷新页面或地址栏输入路由，根据路由得知需要展示页面的名字，根据该名字进行Tree树节点的选中、Tab标签切换、页面展示。

然而，这种实现方法，每一步操作都需要一个中间变量来控制Tree树节点、Tab标签、页面和路由，在页面种类偏多时，代码量也随之加多，若后期需增加不同类型的页面，维护成本也随之增加。

发明内容

本申请实施例提供一种页面组件跳转方法及装置，用以解决现有技术中存在的代码量多，维护成本高的问题。

本申请实施例提供的具体技术方案如下：

第一方面，本申请提供了一种页面组件跳转方法，所述方法包括：

监测用户触发的页面组件选择指令；

在监测到用户触发的目标页面组件选择指令时，基于所述目标页面组件选择指令，确定所述目标页面组件对应的唯一标识；

基于所述唯一标识进行路由跳转，加载显示所述目标页面组件。

可选地，一个页面组件对应的唯一标识为所述一个页面组件的路由信息。

可选地，所述页面组件选择指令包括：Tree树的节点id、Tab标签的name值、路由地址信息。

可选地，一个页面组件的唯一标识为所述一个页面组件的路由地址信息；

所述基于所述目标页面组件选择指令，确定所述目标页面组件对应的唯一标识的步骤包括：

若所述目标页面组件选择指令为所述目标页面组件对应的Tree树的节点id，则基于所述目标页面组件对应的Tree树的节点id和预设的Tree树的节点id与唯一标识之间的关联关系，确定所述目标页面组件对应的目标路由地址信息；

若所述目标页面组件选择指令为所述目标页面组件对应的Tab标签的name值，则基于所述目标页面组件对应的Tab标签的name值和预设的Tab标签的name值与唯一标识之间的关联关系，确定所述目标页面组件对应的目标路由地址信息；

若所述目标页面组件选择指令为所述目标页面组件对应的路由地址信息，则将所述目标页面组件对应的路由地址信息，确定为所述目标页面组件对应的目标路由地址信息。

第二方面，本申请提供了一种页面组件跳转装置，所述装置包括：

监测单元，用于监测用户触发的页面组件选择指令；