[發明專利]一種基于vue的多頁簽實例緩存方法

有效

• 申請號: 202111494719.1
• 申請日: 2021-12-09
• 公開（公告）號: CN113900628B
• 公開（公告）日: 2022-02-18
• 發明（設計）人: 孫娉娉;吳錦旭;龍遜敏
• 申請（專利權）人: 中郵消費金融有限公司
• 主分類號: G06F8/20
• 分類號: G06F8/20
• 代理公司: 廣州微斗專利代理有限公司 44390
• 代理人: 陳文爽

本發明涉及一種基于vue的多頁簽實例緩存的方法，S1、利用抽象組件包裹路由組件，利用用所述key值來標志每一個頁簽組件實例；S2、抽象組件包括cache集合、不緩存頁簽隊列、緩存頁簽隊列；S3、初始化一個全局不緩存頁簽隊列以及全局緩存頁簽隊列；S4、路由發生變化時觸發抽象組件的渲染，從而獲取當前被渲染的頁簽組件，進而得到所述頁簽組件實例的唯一key值；S5、根據key值，抽象組件控制頁簽組件重新渲染，或者讀取緩存中的頁簽組件，從而完成頁簽的打開、頁簽的切換或者頁簽的關閉；從而實現頁簽組件實例粒度上的多頁簽緩存方案。

技術領域

本發明涉及多頁簽網頁開發的技術領域，特別涉及一種基于vue的多頁簽實例緩存方法。

背景技術

目前，在WEB應用領域，越來越多的網站采用單頁面應用這種方式。在這種方式下，用戶在訪問應用頁面是不會頻繁的去切換瀏覽頁面，它通過多頁簽的方式來模擬傳統多頁面的操作模式，動態重寫當前的頁面來與用戶交互，不需要重新加載整個頁面，從而避免了傳統多頁面的重新加載所造成的性能浪費。目前流行的SPA三大框架包括React、Vue、Angular，Vue因學習成本低，易上手，生態體系完善等優點，獲得了很多前端開發人員的青睞。再結合一些基于Vue的流行UI框架，即可快速的實現一個Vue的SPA多頁簽WEB應用。用戶經常在多個頁簽間來回切換及操作，頁面需要在被切換的時候保留用戶的操作痕跡，在被切換回來的時候展示原有用戶的操作；在關閉頁簽重新打開頁面的情況下，需要重新渲染該頁面，不保留用戶的操作痕跡而被重新渲染。

傳統上基于Vue-Router及Vuex實現的多頁簽緩存方案中，每一個頁簽對應一個路由。每次切換路由的時候，通過vue提供的keep-alive組件，根據當前的路由去匹配頁簽的name，從而獲取相應的頁面緩存或者加載新頁面并放入緩存中。而關閉頁簽的時候，根據路由對應該的頁面name去除相應頁面緩存。

但是，在實際業務場景中，存在多頁簽，他們的路由不同但對應的組件卻是一樣的。例如內容編輯頁面/content/1,content/2，keep-alive將不在適用，這個時候關閉/content/1頁簽，/content/2的頁簽也會失去緩存，導致該頁面在再次激活的時候重新渲染。因此一般后管頁面只支持打開一個類型的內容編輯頁面。這種Vue原有的插件只能實現頁簽組件級別上的緩存，并不能夠很好的滿足我們在頁簽組件實例粒度上緩存的動態更新。

發明內容

基于此，有必要提供一種基于vue的多頁簽實例緩存的方法。

本發明實施例提供一種基于vue的多頁簽實例緩存的方法，包括如下步驟：

S1、在keep-alive的機制上，利用抽象組件包裹路由組件，根據當前路由配置生成一個唯一的key值，用所述key值來標志每一個頁簽組件實例，使得所述抽象組件根據唯一的key值識別相應的頁簽組件實例；

S2、所述抽象組件包括用于緩存頁簽組件實例的cache集合、用于存儲不需要緩存的頁簽組件實例的key值的不緩存頁簽隊列、以及用于存儲需要緩存的當前頁簽的key值的緩存頁簽隊列；

S3、初始化一個全局不緩存頁簽隊列，用于存儲不需要緩存的頁簽組件實例的key值，并將所述全局不緩存頁簽隊列與所述抽象組件內的所述不緩存頁簽隊列進行雙向綁定；

初始化一個全局緩存頁簽隊列，用于存儲需要緩存的當前頁簽的key值，并將所述全局緩存頁簽隊列與所述抽象組件內的所述緩存頁簽隊列進行雙向綁定；

S4、路由發生變化時觸發抽象組件的渲染，從而獲取當前被渲染的頁簽組件，進而得到所述頁簽組件實例的唯一key值；

S5、根據key值，抽象組件控制頁簽組件重新渲染，或者讀取緩存中的頁簽組件，從而完成頁簽的打開、頁簽的切換或者頁簽的關閉。

優選地，緩存具體包括：