CN112685663B - 一种基于vue的spa多页签管理方法 - Google Patents

一种基于vue的spa多页签管理方法 Download PDF

Info

Publication number
CN112685663B
CN112685663B CN202011518966.6A CN202011518966A CN112685663B CN 112685663 B CN112685663 B CN 112685663B CN 202011518966 A CN202011518966 A CN 202011518966A CN 112685663 B CN112685663 B CN 112685663B
Authority
CN
China
Prior art keywords
page
tab
routing
component
cache
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202011518966.6A
Other languages
English (en)
Other versions
CN112685663A (zh
Inventor
叶孙龙
钟家顺
周志武
徐增慧
钟清江
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Fujia Newland Software Engineering Co ltd
Original Assignee
Fujia Newland Software Engineering Co ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Fujia Newland Software Engineering Co ltd filed Critical Fujia Newland Software Engineering Co ltd
Priority to CN202011518966.6A priority Critical patent/CN112685663B/zh
Publication of CN112685663A publication Critical patent/CN112685663A/zh
Application granted granted Critical
Publication of CN112685663B publication Critical patent/CN112685663B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
    • Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
    • Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
    • Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management

Landscapes

  • Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本发明提供了WEB开发技术领域的一种基于VUE的SPA多页签管理方法，包括：步骤S10、创建页签路由集合、缓存页面集合、不缓存页面集合；步骤S20、打开页面，生成页签，将页签、路由对象存至页签路由集合，激活页面组件，缓存打开的页面并存至缓存页面集合，完成页签打开；步骤S30、将页签路由集合中页签的路由对象替换为已打开的路由对象，将打开路由对象对应页面存至缓存页面集合，完成页面组件替换；步骤S40、切换激活的页面组件，完成页签切换；步骤S50、从页签路由集合中删除页签以及对应的路由对象，将页面添加至不缓存页面集合，清除缓存，完成页签关闭。本发明的优点在于：实现满足页签基本功能的前提下，极大的减少了页签数量，进而提升用户体验。

Description

一种基于VUE的SPA多页签管理方法
技术领域
本发明涉及WEB开发技术领域，特别指一种基于VUE的SPA多页签管理方法。
背景技术
在WEB应用领域，常需要在多个页面间来回切换及操作，同时需要保留各页面的操作数据，这样的多页面操作通常会使用多页签的方式进行分管，在页签内进行页面跳转、返回等，同时对各页签内的页面的数据进行缓存，保证各个页签在切换的时候能保留之前的数据。
现在越来越多的WEB应用采用单页面应用(SPA)的模式，目前流行的SPA三大框架包括React、Vue、Angular，Vue因学习成本低，易上手，生态体系完善等优点，获得了多数前端开发人员的青睐。常规的SPA应用在页面切换的时候，将旧页面数据进行了清理，因此通常需要借助一些路由组件进行管理，如Vue框架下的Vue-Router插件。在Vue全家桶(Vue、Vuex、Vue-Router)中，Vue-Router提供了页面缓存、返回、跳转、路由生命周期等API，Vuex为Vue应用程序提供了状态管理模式及相关API，再结合一些基于Vue的流行UI框架，如：Element-UI、iView-UI、Vuetify、VueStrap等，即可快速的实现一个Vue的SPA多页签WEB应用。
但传统上基于Vue-Router及Vuex实现的多页签方案中，每一个页签对应一个路由配置，在业务复杂的WEB应用中，可能存在几十甚至数百个页面，需要配置相应的路由及页签，过多的页签数量，对于用户操作及用户体验都是极差的。
因此，如何提供一种基于VUE的SPA多页签管理方法，实现满足页签基本功能的前提下，减少页签数量，成为一个亟待解决的问题。
发明内容
本发明要解决的技术问题，在于提供一种基于VUE的SPA多页签管理方法，实现满足页签基本功能的前提下，减少页签数量。
本发明是这样实现的：一种基于VUE的SPA多页签管理方法，包括如下步骤：
步骤S10、创建一页签路由集合、一缓存页面集合以及一不缓存页面集合；
步骤S20、基于各路由对象打开对应的页面，生成各页面对应的页签，将所述页签以及路由对象存储至页签路由集合，激活当前页面的页面组件，缓存打开的页面并存储至缓存页面集合，完成页签的打开；
步骤S30、当打开的路由对象对应的页签已存在于所述页签路由集合，则替换所述页签路由集合中对应页签的路由对象，并将被替换的路由对象对应的页面添加至所述不缓存页面集合，将打开的路由对象对应的页面存储至所述缓存页面集合，完成页签内页面组件的替换；
步骤S40、通过解除当前页面的页面组件，并激活目标页面的页面组件，完成页签的切换；
步骤S50、从所述页签路由集合中删除页签以及对应的路由对象，并将页签对应的页面添加至所述不缓存页面集合，清除页签关联的缓存，完成页签的关闭。
进一步地，所述步骤S10具体为：
通过Vuex创建一页签路由集合、一缓存页面集合以及一不缓存页面集合；所述页签路由集合用于存储当前已打开的页签以及各页签对应的路由信息；所述缓存页面集合用于存储已缓存页面的页面名称；所述不缓存页面集合用于存储不缓存页面的页面名称。
进一步地，所述步骤S20具体包括：
步骤S21、基于各路由对象打开对应的页面，SPA页签组件通过路由对象携带的路由信息生成各页面对应的页签；所述路由信息至少包括路由编号、URL地址、路由名称以及关联的页面组件；
步骤S22、将所述页签以及路由对象对应的路由信息存储至页签路由集合；
步骤S23、激活当前页面的页面组件；
步骤S24、缓存打开的页面并将页面名称存储至缓存页面集合。
进一步地，所述步骤S23具体包括：
步骤S231、通过Vue-router组件监控URL地址的变化，获取新的路由对象以及旧的路由对象；
步骤S232、解除旧的路由对象对应的页面组件；
步骤S233、通过多页签管理脚本获取路由参数；所述路由参数至少包括to、from以及next；
步骤S234、利用所述路由参数激活当前页面的页面组件。
进一步地，所述步骤S30具体包括：
步骤S31、在一页签中，相同页签名的路由对象间执行跳转操作或回退操作；
步骤S32、替换所述页签路由集合中对应的路由对象，并激活跳转操作或回退操作的页面的页面组件；
步骤S33、缓存打开的页面并存储至所述缓存页面集合。
进一步地，所述步骤S32具体包括：
步骤S321、通过Vue-router组件监控URL地址的变化，获取新的路由对象以及旧的路由对象；
步骤S322、通过多页签管理脚本获取路由参数；所述路由参数至少包括to、from以及next；
步骤S323、利用所述路由参数激活新页面的页面组件；
步骤S324、通过from对象找到当前页签在所述页签路由集合中对应的路由对象，将路由对象替换为to对象；
步骤S325、将from对象的页面从所述缓存页面集合中移除，并添加至所述不缓存页面集合，利用keep-alive组件清除from对象对应页面组件的缓存。
进一步地，所述步骤S40具体为：
通过切换当前激活的页面组件完成页签的切换。
进一步地，所述步骤S50具体为：
SPA页签组件获取待关闭页签对应的路由对象，将待关闭页签对应的路由对象添加至所述不缓存页面集合，利用keep-alive组件将路由对象对应的页面组件的缓存进行清除，从缓存中加载所述页签路由集合中最后一个页签对应的页面组件，完成页签的关闭。
本发明的优点在于：
通过创建页签路由集合、缓存页面集合以及不缓存页面集合对页签以及页面进行统一管理，即按需更新页签的数据，并结合VUE、Vuex以及Vue-router组件完成页签切换、跳转、返回等基本功能，即实现满足页签基本功能的前提下，减少页签数量，进行减少页面缓存的数量，极大的降低了浏览器的缓存压力，极大的提升了用户体验。
附图说明
下面参照附图结合实施例对本发明作进一步的说明。
图1是本发明一种基于VUE的SPA多页签管理方法的流程图。
具体实施方式
本申请实施例中的技术方案，总体思路如下：在每个页面的路由配置中，添加相同的页签名称属性，通过多页签管理脚本、页签路由集合、缓存页面集合、不缓存页面集合相结合，对关联相同页签名称的页面，在打开相同页签的页面时，替换页签路由集合中对应页签所关联的路由对象，并将被替换的路由对象信息从缓存页面集合中移除，将被替换的路由对象信息存储至不缓存页面集合中，清除被替换页面的缓存，将打开页面的路由对象信息存储至缓存页面集合并缓存打开页面组件，实现一个页签关联多个页面，但每个页签只缓存当前打开的页签关联页面，有效减少多页签WEB应用的页签总数量，并且因页签数的减少，降低浏览器缓存压力。
请参照图1所示，本发明一种基于VUE的SPA多页签管理方法的较佳实施例，包括如下步骤：
步骤S10、创建一页签路由集合(visitedViews)、一缓存页面集合(catchViews)以及一不缓存页面集合(excludeViews)；
步骤S20、基于各路由对象打开对应的页面，生成各页面对应的页签，将所述页签以及路由对象存储至页签路由集合，激活当前页面的页面组件，缓存打开的页面并存储至缓存页面集合，完成页签的打开(新增)；
步骤S30、当打开的路由对象对应的页签已存在于所述页签路由集合，则替换所述页签路由集合中对应页签的路由对象，并将被替换的路由对象对应的页面添加至所述不缓存页面集合，将打开的路由对象对应的页面存储至所述缓存页面集合，完成页签内页面组件的替换；
步骤S40、通过解除当前页面的页面组件，并激活目标页面的页面组件，完成页签的切换；
步骤S50、从所述页签路由集合中删除页签以及对应的路由对象，并将页签对应的页面添加至所述不缓存页面集合，清除页签关联的缓存，完成页签的关闭。
所述步骤S10具体为：
通过Vuex创建一页签路由集合、一缓存页面集合以及一不缓存页面集合；所述页签路由集合用于存储当前已打开的页签以及各页签对应的路由信息；所述缓存页面集合用于存储已缓存页面的页面名称；所述不缓存页面集合用于存储不缓存页面的页面名称。
所述步骤S20具体包括：
步骤S21、基于各路由对象打开对应的页面，SPA页签组件通过路由对象携带的路由信息生成各页面对应的页签；所述路由信息至少包括路由编号、URL地址、路由名称以及关联的页面组件；
步骤S22、将所述页签以及路由对象对应的路由信息存储至页签路由集合；
步骤S23、激活当前页面的页面组件；
步骤S24、缓存打开的页面并将页面名称存储至缓存页面集合。
所述步骤S23具体包括：
步骤S231、通过Vue-router组件监控URL地址的变化，获取新的路由对象以及旧的路由对象；Vue-router组件是Vue.js官方的路由管理器；
步骤S232、解除旧的路由对象对应的页面组件；
步骤S233、通过多页签管理脚本获取路由参数；所述路由参数至少包括to(目标路由对象，即要打开页面对应的路由对象)、from(来源路由对象，即要关闭或解除页面对应的路由对象)以及next(为执行函数，①不添加参数并调用该函数才能完成从from到to的跳转；②当该函数的参数设为false并调用该函数，则阻止from到to的跳转，依旧停留在from对应的页面；③当该函数的参数设为其他路由并调用该函数时，则跳转至参数对应路由对象的页面)；
步骤S234、利用所述路由参数激活当前页面的页面组件。
所述步骤S30具体包括：
步骤S31、在一页签中，相同页签名的路由对象间执行跳转操作或回退操作；
步骤S32、替换所述页签路由集合中对应的路由对象，并激活跳转操作或回退操作的页面的页面组件；
步骤S33、缓存打开的页面并存储至所述缓存页面集合。
所述步骤S32具体包括：
步骤S321、通过Vue-router组件监控URL地址的变化，获取新的路由对象以及旧的路由对象；
步骤S322、通过多页签管理脚本获取路由参数；所述路由参数至少包括to、from以及next；
步骤S323、利用所述路由参数激活新页面的页面组件；
步骤S324、通过from对象找到当前页签在所述页签路由集合中对应的路由对象，将路由对象替换为to对象；from对象和to对象即分别携带from和to的路由参数的路由对象；
步骤S325、将from对象的页面从所述缓存页面集合中移除，并添加至所述不缓存页面集合，利用keep-alive组件清除from对象对应页面组件的缓存。keep-alive组件是VUE提供的缓存组件。
所述步骤S40具体为：
通过切换当前激活的页面组件完成页签的切换。
所述步骤S50具体为：
SPA页签组件获取待关闭页签对应的路由对象，将待关闭页签对应的路由对象添加至所述不缓存页面集合，利用keep-alive组件将路由对象对应的页面组件的缓存进行清除，从缓存中加载所述页签路由集合中最后一个页签对应的页面组件，完成页签的关闭。
综上所述，本发明的优点在于：
通过创建页签路由集合、缓存页面集合以及不缓存页面集合对页签以及页面进行统一管理，即按需更新页签的数据，并结合VUE、Vuex以及Vue-router组件完成页签切换、跳转、返回等基本功能，即实现满足页签基本功能的前提下，减少页签数量，进行减少页面缓存的数量，极大的降低了浏览器的缓存压力，极大的提升了用户体验。
虽然以上描述了本发明的具体实施方式，但是熟悉本技术领域的技术人员应当理解，我们所描述的具体的实施例只是说明性的，而不是用于对本发明的范围的限定，熟悉本领域的技术人员在依照本发明的精神所作的等效的修饰以及变化，都应当涵盖在本发明的权利要求所保护的范围内。

Claims (2)

1.一种基于VUE的SPA多页签管理方法，其特征在于：包括如下步骤：
步骤S10、通过Vuex创建一页签路由集合、一缓存页面集合以及一不缓存页面集合；所述页签路由集合用于存储当前已打开的页签以及各页签对应的路由信息；所述缓存页面集合用于存储已缓存页面的页面名称；所述不缓存页面集合用于存储不缓存页面的页面名称；
步骤S20、基于各路由对象打开对应的页面，生成各页面对应的页签，将所述页签以及路由对象存储至页签路由集合，激活当前页面的页面组件，缓存打开的页面并存储至缓存页面集合，完成页签的打开；
步骤S30、当打开的路由对象对应的页签已存在于所述页签路由集合，则替换所述页签路由集合中对应页签的路由对象，并将被替换的路由对象对应的页面添加至所述不缓存页面集合，将打开的路由对象对应的页面存储至所述缓存页面集合，完成页签内页面组件的替换；
步骤S40、通过解除当前页面的页面组件，并激活目标页面的页面组件，完成页签的切换；
步骤S50、SPA页签组件获取待关闭页签对应的路由对象，将待关闭页签对应的路由对象添加至所述不缓存页面集合，利用keep-alive组件将路由对象对应的页面组件的缓存进行清除，从缓存中加载所述页签路由集合中最后一个页签对应的页面组件，完成页签的关闭；
所述步骤S20具体包括：
步骤S21、基于各路由对象打开对应的页面，SPA页签组件通过路由对象携带的路由信息生成各页面对应的页签；所述路由信息至少包括路由编号、URL地址、路由名称以及关联的页面组件；
步骤S22、将所述页签以及路由对象对应的路由信息存储至页签路由集合；
步骤S23、激活当前页面的页面组件；
步骤S24、缓存打开的页面并将页面名称存储至缓存页面集合；
所述步骤S23具体包括：
步骤S231、通过Vue-router组件监控URL地址的变化，获取新的路由对象以及旧的路由对象；
步骤S232、解除旧的路由对象对应的页面组件；
步骤S233、通过多页签管理脚本获取路由参数；所述路由参数至少包括to、from以及next；
步骤S234、利用所述路由参数激活当前页面的页面组件；
所述步骤S30具体包括：
步骤S31、在一页签中，相同页签名的路由对象间执行跳转操作或回退操作；
步骤S32、替换所述页签路由集合中对应的路由对象，并激活跳转操作或回退操作的页面的页面组件；
步骤S33、缓存打开的页面并存储至所述缓存页面集合；
所述步骤S32具体包括：
步骤S321、通过Vue-router组件监控URL地址的变化，获取新的路由对象以及旧的路由对象；
步骤S322、通过多页签管理脚本获取路由参数；所述路由参数至少包括to、from以及next；
步骤S323、利用所述路由参数激活新页面的页面组件；
步骤S324、通过from对象找到当前页签在所述页签路由集合中对应的路由对象，将路由对象替换为to对象；
步骤S325、将from对象的页面从所述缓存页面集合中移除，并添加至所述不缓存页面集合，利用keep-alive组件清除from对象对应页面组件的缓存。
2.如权利要求1所述的一种基于VUE的SPA多页签管理方法，其特征在于：所述步骤S40具体为：
通过切换当前激活的页面组件完成页签的切换。
CN202011518966.6A 2020-12-21 2020-12-21 一种基于vue的spa多页签管理方法 Active CN112685663B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202011518966.6A CN112685663B (zh) 2020-12-21 2020-12-21 一种基于vue的spa多页签管理方法

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202011518966.6A CN112685663B (zh) 2020-12-21 2020-12-21 一种基于vue的spa多页签管理方法

Publications (2)

Publication Number Publication Date
CN112685663A CN112685663A (zh) 2021-04-20
CN112685663B true CN112685663B (zh) 2023-05-12

Family

ID=75449929

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202011518966.6A Active CN112685663B (zh) 2020-12-21 2020-12-21 一种基于vue的spa多页签管理方法

Country Status (1)

Country Link
CN (1) CN112685663B (zh)

Families Citing this family (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN113900628B (zh) * 2021-12-09 2022-02-18 中邮消费金融有限公司 一种基于vue的多页签实例缓存方法
CN116610892B (zh) * 2023-05-25 2024-09-27 北京商越网络科技有限公司 一种页签模式的生成方法、装置及设备
CN117579549B (zh) * 2024-01-19 2024-05-31 广州市玄武无线科技股份有限公司 一种动态路由多页面的缓存方法和装置

Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109241469A (zh) * 2018-09-13 2019-01-18 安徽智恒信科技有限公司 一种基于vue实现多页面切换的方法
CN109492176A (zh) * 2018-10-30 2019-03-19 天脉聚源（北京）教育科技有限公司 一种页面信息更新方法及装置
CN109522501A (zh) * 2018-11-26 2019-03-26 腾讯科技（深圳）有限公司 页面内容管理方法及其装置
CN110008429A (zh) * 2019-04-09 2019-07-12 吉旗（成都）科技有限公司 一种页面跳转方法和装置、存储介质及终端
CA3058070A1 (en) * 2018-10-11 2020-04-11 10353744 Canada Ltd. Page switching method and device, electronic device and storage medium

Patent Citations (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109241469A (zh) * 2018-09-13 2019-01-18 安徽智恒信科技有限公司 一种基于vue实现多页面切换的方法
CA3058070A1 (en) * 2018-10-11 2020-04-11 10353744 Canada Ltd. Page switching method and device, electronic device and storage medium
CN109492176A (zh) * 2018-10-30 2019-03-19 天脉聚源（北京）教育科技有限公司 一种页面信息更新方法及装置
CN109522501A (zh) * 2018-11-26 2019-03-26 腾讯科技（深圳）有限公司 页面内容管理方法及其装置
CN110008429A (zh) * 2019-04-09 2019-07-12 吉旗（成都）科技有限公司 一种页面跳转方法和装置、存储介质及终端

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
vue实现多标签保持页面管理系统;良月零五;《https://blog.csdn.net/sunshouyan/article/details/107020260?》;20200721;第1-17页 *

Also Published As

Publication number Publication date
CN112685663A (zh) 2021-04-20

Similar Documents

Publication Publication Date Title
CN112685663B (zh) 一种基于vue的spa多页签管理方法
CN111610978B (zh) 一种小程序转换方法、装置、设备及存储介质
CN110708368A (zh) 一种基于路由分发的微前端系统和方法
CN111277643A (zh) 一种http链路跟踪记录方法及系统
CN102693280A (zh) 网页浏览方法、WebApp框架、执行JavaScript方法及装置、移动终端
CN109240670A (zh) 模块化的软件开发方法、系统、设备及介质
CN111124379B (zh) 页面生成方法、装置、电子设备及存储介质
CN112416425B (zh) App构建方法、装置、计算机设备及存储介质
CN104808952A (zh) 数据缓存方法及装置
CN113900628B (zh) 一种基于vue的多页签实例缓存方法
JP7130803B2 (ja) 検索方法、検索装置、電子機器及び記憶媒体
CN112182074A (zh) 一种数据可视化方法、装置、电子设备及可读存储介质
CN104270257A (zh) 基于pb和xpath的网元级网管业务配置适配系统及方法
EP2256633A2 (en) Service provider management device, service provider management program, and service provider management method
US20200311173A1 (en) Latency minimization in mobile applications
US20160306714A1 (en) Checkpointing higher order query operators
CN103577380B (zh) 一种动态路由服务的自动生成方法
JP2008003882A (ja) コンパイラプログラム，リストベクトルの領域割当て最適化方法，コンパイル処理装置およびコンパイラプログラムを記録したコンピュータ読み取り可能な記録媒体
CN102799423A (zh) Jsf中执行动态方法的方法及装置
US10120796B2 (en) Memory allocation for long-lived objects
US10936483B2 (en) Hybrid garbage collection
KR100759815B1 (ko) 패스토큰 기반 웹 서비스 캐싱 방법
CN101093486A (zh) Asp.net页面间跳转查询条件记录方法
CN114637499A (zh) 可视化组件处理方法、装置、设备及介质
CN113961298A (zh) 一种页面切换方法、装置、设备及介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant