[發(fā)明專利]一種基于vue實(shí)現(xiàn)多頁面切換的方法

在審

• 申請?zhí)枺?/td>: 201811070080.2
• 申請日: 2018-09-13
• 公開（公告）號(hào): CN109241469A
• 公開（公告）日: 2019-01-18
• 發(fā)明（設(shè)計(jì)）人: 余忠爭;李鑫;甘松云
• 申請（專利權(quán)）人: 安徽智恒信科技有限公司
• 主分類號(hào): G06F16/957
• 分類號(hào): G06F16/957;G06F16/958;G06F9/445
• 代理公司: 安徽知問律師事務(wù)所 34134
• 代理人: 代群群

本發(fā)明公開了一種基于vue實(shí)現(xiàn)多頁面切換的方法，屬于計(jì)算機(jī)web開發(fā)技術(shù)領(lǐng)域。它包括所述多頁面之間的切換采用vue緩存機(jī)制，方法步具體如下：將已經(jīng)訪問的頁面數(shù)據(jù)放入vue緩存機(jī)制中；判斷新頁面是否存在于vue緩存機(jī)制中；若判斷所述新頁面存在于vue緩存機(jī)制中，則直接從vue緩存機(jī)制中讀取；若判斷所述新頁面不存在于vue緩存機(jī)制中，則將所述新頁面的頁面數(shù)據(jù)放入vue緩存機(jī)制中；關(guān)閉應(yīng)用頁面。本發(fā)明避免了向服務(wù)器重復(fù)請求加載，降低了服務(wù)器的壓力，也加快了頁面的打開速度。

技術(shù)領(lǐng)域

本發(fā)明屬于計(jì)算機(jī)web開發(fā)技術(shù)領(lǐng)域，具體地說，涉及一種基于vue實(shí)現(xiàn)多頁面切換的方法。

背景技術(shù)

在web頁面預(yù)覽過程中，經(jīng)常需要在多個(gè)頁面之間來回切換，在網(wǎng)速很慢的情況下，用戶每次切換頁面都需要等待一段時(shí)間，影響用戶體驗(yàn)，在頁面訪問人數(shù)過多的情況下，反復(fù)的請求會(huì)加大請求量，增加服務(wù)器負(fù)擔(dān)。而現(xiàn)有的多頁面切換，大多采用的是tab切換效果，通過顯示和隱藏Dom的內(nèi)容來實(shí)現(xiàn)，而這種方法的不足之處是：支持的tab頁面數(shù)量較少。也有采用iframe嵌套的形式來實(shí)現(xiàn)多頁面切換，或者采用ajax的load追加內(nèi)容到指定頁面區(qū)域顯示，但這兩種方式的頁面切換，始終存在切換頁面的內(nèi)容重復(fù)加載的問題。

期刊《科技創(chuàng)新與應(yīng)用》中“基于Vue.js構(gòu)建單頁面GIS應(yīng)用的方法研究”公開了：隨著單頁Web應(yīng)用開發(fā)技術(shù)的不斷完善，越來越多的Web應(yīng)用都采用了單頁面應(yīng)用模式。文章詳細(xì)介紹了基于Vue構(gòu)建單頁面應(yīng)用的系統(tǒng)架構(gòu)、關(guān)鍵技術(shù),并以閔行區(qū)基于航拍影片的建設(shè)用地核對項(xiàng)目為例,搭建了閔行區(qū)地塊認(rèn)定工作成果展示系統(tǒng),為開發(fā)人員搭建單頁面GIS應(yīng)用提供了一種新的解決方案。但是該期刊的不足之處在于：只能基于Vue.js實(shí)現(xiàn)單頁面之間的轉(zhuǎn)換，無法實(shí)現(xiàn)多頁面的轉(zhuǎn)換，也不能解決多頁面轉(zhuǎn)換時(shí)存在的問題。

因此，多頁面切換時(shí)向服務(wù)器的數(shù)據(jù)重復(fù)請求加載，和多頁面間的數(shù)據(jù)傳輸更新是現(xiàn)有技術(shù)中亟需解決的技術(shù)問題。

發(fā)明內(nèi)容

1、要解決的問題

針對現(xiàn)有多頁面切換的數(shù)據(jù)反復(fù)請求加載的問題，本發(fā)明提供了一種基于vue實(shí)現(xiàn)多頁面切換的方法。

2、技術(shù)方案

為解決上述問題，本發(fā)明采用如下的技術(shù)方案。

一種基于vue實(shí)現(xiàn)多頁面切換的方法，所述多頁面之間的切換采用vue緩存機(jī)制，方法步具體如下：

將已經(jīng)訪問的頁面數(shù)據(jù)放入vue緩存機(jī)制中；

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

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

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

根據(jù)所述頁面的應(yīng)用邏輯，關(guān)閉應(yīng)用頁面，并判斷所述關(guān)閉應(yīng)用頁面是否為當(dāng)前顯示頁面；

若判斷所述關(guān)閉應(yīng)用頁面不為當(dāng)前顯示頁面，則關(guān)閉所述應(yīng)用頁面，結(jié)束操作；

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

更進(jìn)一步地，所述vue緩存機(jī)制具體為：

根據(jù)vue-cli腳手架工具初始化創(chuàng)建vue項(xiàng)目；

在vue項(xiàng)目根目錄下的A文件夾中新建B文件夾和C文件夾；

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

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