Vue2.0 實現(xiàn)頁面緩存和不緩存的方式

更新時間：2019年11月12日 09:46:20 作者：蝸牛速度額

今天小編就為大家分享一篇Vue2.0 實現(xiàn)頁面緩存和不緩存的方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧

1、在app中設(shè)置需要緩存的div

<keep-alive>//緩存的頁面
  <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>//不緩存的頁面

2、在路由router.js中設(shè)置.vue頁面是否需要緩存

{
  path: '/home',
  component: home,
  meta: { keepAlive: true },//當(dāng)前的.vue文件需要緩存
},
{
  path: '/notice',
  component: notice,//當(dāng)前頁面不需要緩存
}

3、從緩存頁面跳轉(zhuǎn)到不緩存頁面，或者從不緩存頁面跳轉(zhuǎn)到緩存頁面的時候，會發(fā)現(xiàn)watch是不能監(jiān)聽路由的，是因為緩存和不緩存頁面分別在不同的div里面，一個div里面是不可能監(jiān)聽到另一個div的路由的，所有需要把監(jiān)聽的路由都加上緩存（在路由添加 meta: { keepAlive: true }），路由在緩存頁面之間進(jìn)行跳轉(zhuǎn)的時候，就可以通過監(jiān)聽路由來進(jìn)行判斷數(shù)據(jù)是否需要更新。

vue keep-alive 緩存后，進(jìn)入緩存頁需要再次更新

beforeRouteEnter (to, from, next) {
 next (vm => {
   vm.getData()
 })
},
 mounted: function () {
  this.getData()
}

keep-alive 數(shù)據(jù)更新問題

在項目中使用<keep-alive>包含<router-view>實現(xiàn)頁面緩存，加速頁面加載，

同時，這種方式帶來一些弊端，請看如下大神解釋：

****************************************************************************

當(dāng)引入keep-alive的時候，頁面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時觸發(fā)deactivated。

當(dāng)再次進(jìn)入（前進(jìn)或者后退）時，只觸發(fā)activated。

****************************************************************************

這就帶來一個問題，之前在項目中使用mounted在頁面加載時獲取數(shù)據(jù)，使用<keep-alive>后方法不再生效，

根據(jù)上面的解釋，將mounted替換為activated即可。

以上這篇Vue2.0 實現(xiàn)頁面緩存和不緩存的方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴實現(xiàn)原理代碼簡析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴來到達(dá)數(shù)據(jù)的動態(tài)響應(yīng)，有興趣的可以了解一下
2017-07-07
vue對插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-07-07
Vue2?的?diff?算法規(guī)則原理詳解
這篇文章主要介紹了Vue2的diff算法規(guī)則原理詳解，diff?算法，就是通過比對新舊兩個虛擬節(jié)點(diǎn)不一樣的地方，針對那些不一樣的地方進(jìn)行新增或更新或刪除操作。接下來我們詳細(xì)介紹節(jié)點(diǎn)更新的過程
2022-06-06
vue跳轉(zhuǎn)頁面并且實現(xiàn)參數(shù)傳遞接受示例
這篇文章主要為大家介紹了vue跳轉(zhuǎn)頁面并且實現(xiàn)參數(shù)傳遞接受示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪
2022-06-06
vue的三種圖片引入方式代碼實例
這篇文章主要介紹了vue的三種圖片引入方式代碼實例,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下
2019-11-11
關(guān)于vue3?option?api新玩法分享
vue3新特性中最重要、內(nèi)容最多的組合式api,組合式api既可以解決之前vue2開發(fā)的痛點(diǎn),又提升了性能,下面這篇文章主要給大家介紹了關(guān)于vue3?option?api新玩法的相關(guān)資料,需要的朋友可以參考下
2022-06-06
Vue3+Element?Plus使用svg加載iconfont的處理方法
這篇文章主要介紹了Vue3+Element?Plus使用svg加載iconfont的解決方案,本文詳細(xì)介紹了如何在Element?Plus中使用iconfont，簡單的說就是要將其封裝成SVG，并且支持動態(tài)修改顏色，需要的朋友可以參考下
2022-08-08
vue+animation實現(xiàn)翻頁動畫
這篇文章主要為大家詳細(xì)介紹了vue+animation實現(xiàn)翻頁動畫，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2020-06-06
vue中使用[provide/inject]實現(xiàn)頁面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實現(xiàn)頁面reload的方法，文中給大家提到了在vue中實現(xiàn)頁面刷新不同的方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
2019-09-09
vue實現(xiàn)在表格里,取每行的id的方法
下面小編就為大家分享一篇vue實現(xiàn)在表格里,取每行的id的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-03-03