[發明專利]一種基于vue實現多頁面切換的方法

在審

• 申請號: 201811070080.2
• 申請日: 2018-09-13
• 公開（公告）號: CN109241469A
• 公開（公告）日: 2019-01-18
• 發明（設計）人: 余忠爭;李鑫;甘松云
• 申請（專利權）人: 安徽智恒信科技有限公司
• 主分類號: G06F16/957
• 分類號: G06F16/957;G06F16/958;G06F9/445
• 代理公司: 安徽知問律師事務所 34134
• 代理人: 代群群

1.一種基于vue實現多頁面切換的方法，其特征在于，所述多頁面之間的切換采用vue緩存機制，方法步具體如下：

將已經訪問的頁面數據放入vue緩存機制中；

判斷新頁面是否存在于vue緩存機制中；

若判斷所述新頁面存在于vue緩存機制中，則直接從vue緩存機制中讀取；

若判斷所述新頁面不存在于vue緩存機制中，則將所述新頁面的頁面數據放入vue緩存機制中；

根據所述頁面的應用邏輯，關閉應用頁面，并判斷所述關閉應用頁面是否為當前顯示頁面；

若判斷所述關閉應用頁面不為當前顯示頁面，則關閉所述應用頁面，結束操作；

若判斷所述關閉應用頁面為當前顯示頁面，則查找最近一次打開的頁面記錄，若找到則打開最近一次的頁面，若找不到，則返回至首頁。

2.根據權利要求1所述的一種基于vue實現多頁面切換的方法，其特征在于，所述vue緩存機制具體為：

根據vue-cli腳手架工具初始化創建vue項目；

在vue項目根目錄下的A文件夾中新建B文件夾和C文件夾；

在所述B文件夾中建立D文件，并在所述D文件中配置路由；

將所述路由對應的頁面組件放置在所述C文件夾中。

3.根據權利要求2所述的一種基于vue實現多頁面切換的方法，其特征在于，所述的將所述路由對應的頁面組件放置在所述C文件夾中之后，還包括以下步驟：

在vue項目根目錄中的項目入口文件E中引入B路由模塊；

將B實例注入到vue根組件中，實現對路由的調用。

4.根據權利要求3所述的一種基于vue實現多頁面切換的方法，其特征在于，所述vue根組件中加入有容器，用于切換所述路由，存放所述路由對應的頁面組件名稱。

5.根據權利要求4所述的一種基于vue實現多頁面切換的方法，其特征在于，所述新頁面的頁面數據放入vue緩存機制之前，還包括以下步驟：

根據所述新頁面對應的url確定對應的路由；

根據所述新頁面的對應路由確定頁面組件。

6.根據權利要求4所述的一種基于vue實現多頁面切換的方法，其特征在于，所述新頁面的頁面數據放入vue緩存機制中，具體如下：

打開新頁面的頁面組件；

將新頁面的路由地址存入路由地址數組中；

將新頁面的頁面組件數據存入頁面組件數據數組中。

7.根據權利要求4所述的一種基于vue實現多頁面切換的方法，其特征在于，所述關閉應用頁面，具體如下：

關閉所述應用頁面對應的路由；

在所述路由地址數組中刪除所述應用頁面對應的路由地址；

判斷所述應用頁面的頁面組件數據是否存在于頁面組件數據數組中；

若所述應用頁面的頁面組件數據存在于頁面組件數據數組中，則在所述頁面組件數據數組中刪除所述應用頁面的頁面組件數據，關閉所述應用頁面；

若所述應用頁面的頁面組件數據不存在于頁面組件數據數組中，則直接關閉所述應用頁面。

8.根據權利要求4所述的一種基于vue實現多頁面切換的方法，其特征在于，所述多頁面之間的切換還包括：

所述多頁面之間的數據通過vuex進行傳輸；

所述多頁面之間的事件執行通過vuex變化進行觸發。

9.根據權利要求8所述的一種基于vue實現多頁面切換的方法，其特征在于，所述vuex具體為：

在vue項目根目錄中安裝vuex模塊；

在在vue項目根目錄中的項目入口文件E中引入vuex模塊；

創建F實例，并將F實例注入至vue根組件中。