【技术实现步骤摘要】
本专利技术涉及web前端，具体地说，涉及web前端标签管理方法、装置、设备、介质及产品。
技术介绍
1、当前利用前端开发框架开发web项目，路由和标签页联动的场景特别普遍，但是在日常开发中都是路由加载完标签页父级组件以后，由父级组件自己进行状态管理。但是仅靠第三方组件进行标签页组件显示时，由于标签包裹的内容采用的是不销毁政策，来回切换的过程中可能无法触发特定钩子函数来实现指定效果，需要额外进行逻辑判断，因此通过第三方组件进行标签页组件显示的逻辑判断过程十分复杂，使得开发维护的任务量就变得繁重。
技术实现思路
1、为了解决上述问题，本专利技术提出一种web前端标签管理方法、装置、设备、介质及产品，能够减少简化标签组件显示时逻辑处理流程，减少开发维护的任务量。
2、本专利技术实施例提供一种web前端标签管理方法，包括：
3、根据在module.actions组件中编写的接口从后端请求中获取数据，并返回页签数组；
4、遍历所述页签数组，对所述页签数组中每个元素进行组件加载；
5、通过路由守卫拦截到加载时访问的路由为预定义的标签管理路由时，根据定义的actions组件修改动态选项卡，并基于动态选项卡自动计算并显示对应组件。
6、优选地，所述页签数组中的元素包括路由、页签名以及组件名三个属性。
7、作为一种优选方案，所述对所述页签数组中每个元素进行组件加载，包括：
8、利用webpack的组件打包特性，打包指
9、优选地，所述基于动态选项卡自动计算并显示对应组件，包括：
10、根据预先定义的用于维护当前用户拥有权限的标签页数组的状态，生成当前的标签dom；
11、利用属性结合正则表达式对路由配置路径进行计算，将得到的activetab作为标签dom的高亮标识。
12、进一步地，所述方法还包括：
13、当activetab等于tab时，点亮<keep-alive>包裹的<router-view>的子路由展示区。
14、进一步地，所述方法还包括：
15、当tab接收到点击触发时，跳转标签指向的路由页面；
16、接受<keep-alive>的include属性传递的数组。
17、优选地，所述标签管理路由预定义过程包括：
18、在框架文件的路由定义文件router.js中定义一个拥有标签页页面的路由对象并导出作为所述标签管理路由；
19、其中，所述路由对象包括路由路径属性、路由对应组件和路由的子路由。
20、进一步地，所述方法还包括：
21、根据vue-router插件提供的路由构建函数new router()和所述标签管理路由生成路由对象并导出。
22、优选地，所述方法还包括：
23、在vuex中维护一个页签权限的module模块；
24、在module模块中定义用于维护当前用户拥有权限的标签页数组dynamictabs的状态。
25、优选地，所述方法还包括：
26、在module模块中定义用于修改标签页数组dynamictabs的mutation。
27、本专利技术实施例提供一种web前端标签管理装置，所述装置包括：
28、数据获取模块，用于根据在module.actions组件中编写的接口从后端请求中获取数据，并返回页签数组；
29、组件加载模块，用于遍历所述页签数组，对所述页签数组中每个元素进行组件加载；
30、标签管理模块，用于通过路由守卫拦截到加载时访问的路由为预定义的标签管理路由时，根据定义的actions组件修改动态选项卡，并基于动态选项卡自动计算并显示对应组件。
31、优选地，所述页签数组中的元素包括路由、页签名以及组件名三个属性。
32、优选地，所述组件加载模块具体用于：
33、利用webpack的组件打包特性，打包指定路径文件夹下所有包含组件名的文件。
34、优选地，所述标签管理模块还用于
35、根据预先定义的用于维护当前用户拥有权限的标签页数组的状态，生成当前的标签dom；
36、利用属性结合正则表达式对路由配置路径进行计算，将得到的activetab作为标签dom的高亮标识。
37、进一步地，所述标签管理模块还用于
38、当activetab等于tab时，点亮<keep-alive>包裹的<router-view>的子路由展示区。
39、优选地，所述标签管理模块还用于
40、当tab接收到点击触发时，跳转标签指向的路由页面；
41、接受<keep-alive>的include属性传递的数组。
42、优选地，所述标签管理模块定义标签管理路由的过程包括：
43、在框架文件的路由定义文件router.js中定义一个拥有标签页页面的路由对象并导出作为所述标签管理路由；
44、其中，所述路由对象包括路由路径属性、路由对应组件和路由的子路由。
45、优选地，所述装置还包括路由对象定义模块，用于：
46、根据vue-router插件提供的路由构建函数new router()和所述标签管理路由生成路由对象并导出。
47、优选地，所述装置还包括状态定义模块，用于：
48、在vuex中维护一个页签权限的module模块；
49、在module模块中定义用于维护当前用户拥有权限的标签页数组dynamictabs的状态。
50、优选地，所述装置还包括定义模块，用于：
51、在module模块中定义用于修改标签页数组dynamictabs的mutation。
52、本专利技术实施例还提供一种终端设备，包括处理器、存储器以及存储在所述存储器中且被配置为由所述处理器执行的计算机程序，所述处理器执行所述计算机程序时实现如上述任一项实施例所述的一种web前端标签管理方法。
53、本专利技术实施例还提供一种计算机可读存储介质，所述计算机可读存储介质包括存储的计算机程序，其中，在所述计算机程序运行时控制所述计算机可读存储介质所在设备执行如上述任一项实施例所述的一种web前端标签管理方法。
54、本专利技术实施例还提供一种计算机程序产品，包括计算机程序/指令，该计算机程序/指令被处理器执行时实现上述任一项实施例所述的一种web前端标签管理方法。
55、本专利技术提供一种web前端标签管理方法、装置、设备、介质及产品，通过根据在module.actions组件中编写的接口从后端请求中获取数据，并返回页签数组；遍历所述页签数组，对所述本文档来自技高网...
【技术保护点】
1.一种web前端标签管理方法，其特征在于，包括：
2.根据权利要求1所述的web前端标签管理方法，其特征在于，所述页签数组中的元素包括路由、页签名以及组件名三个属性。
3.根据权利要求1所述的web前端标签管理方法，其特征在于，所述对所述页签数组中每个元素进行组件加载，包括：
4.根据权利要求1所述的web前端标签管理方法，其特征在于，所述并基于动态选项卡自动计算并显示对应组件，包括：
5.根据权利要求4所述的web前端标签管理方法，其特征在于，所述方法还包括：
6.根据权利要求5所述的web前端标签管理方法，其特征在于，所述方法还包括：
7.根据权利要求1所述的web前端标签管理方法，其特征在于，所述标签管理路由预定义过程包括：
8.根据权利要求7所述的web前端标签管理方法，其特征在于，所述方法还包括：
9.根据权利要求1所述的web前端标签管理方法，其特征在于，所述方法还包括：
10.根据权利要求9所述的web前端标签管理方法，其特征在于，所述方法还包括：
<...【技术特征摘要】
1.一种web前端标签管理方法，其特征在于，包括：
2.根据权利要求1所述的web前端标签管理方法，其特征在于，所述页签数组中的元素包括路由、页签名以及组件名三个属性。
3.根据权利要求1所述的web前端标签管理方法，其特征在于，所述对所述页签数组中每个元素进行组件加载，包括：
4.根据权利要求1所述的web前端标签管理方法，其特征在于，所述并基于动态选项卡自动计算并显示对应组件，包括：
5.根据权利要求4所述的web前端标签管理方法，其特征在于，所述方法还包括：
6.根据权利要求5所述的web前端标签管理方法，其特征在于，所述方法还包括：
7.根据权利要求1所述的web前端标签管理方法，其特征在于，所述标签管理路由预定义过程包括：
8.根据权利要求7所述的web前端标签管理方法，其特征在于，所述方法还包括：
9.根据...
【专利技术属性】
技术研发人员：胡时航，朱周通，杨晓艺，李晨星，
申请(专利权)人：中移上海信息通信科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。