Vue2.0 實(shí)現(xiàn)頁(yè)面緩存和不緩存的方式
1、在app中設(shè)置需要緩存的div
<keep-alive>//緩存的頁(yè)面 <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view>//不緩存的頁(yè)面
2、在路由router.js中設(shè)置.vue頁(yè)面是否需要緩存
{
path: '/home',
component: home,
meta: { keepAlive: true },//當(dāng)前的.vue文件需要緩存
},
{
path: '/notice',
component: notice,//當(dāng)前頁(yè)面不需要緩存
}
3、從緩存頁(yè)面跳轉(zhuǎn)到不緩存頁(yè)面，或者從不緩存頁(yè)面跳轉(zhuǎn)到緩存頁(yè)面的時(shí)候，會(huì)發(fā)現(xiàn)watch是不能監(jiān)聽(tīng)路由的，是因?yàn)榫彺婧筒痪彺骓?yè)面分別在不同的div里面，一個(gè)div里面是不可能監(jiān)聽(tīng)到另一個(gè)div的路由的，所有需要把監(jiān)聽(tīng)的路由都加上緩存（在路由添加 meta: { keepAlive: true }），路由在緩存頁(yè)面之間進(jìn)行跳轉(zhuǎn)的時(shí)候，就可以通過(guò)監(jiān)聽(tīng)路由來(lái)進(jìn)行判斷數(shù)據(jù)是否需要更新。
vue keep-alive 緩存后， 進(jìn)入緩存頁(yè)需要再次更新
beforeRouteEnter (to, from, next) {
next (vm => {
vm.getData()
})
},
mounted: function () {
this.getData()
}
keep-alive 數(shù)據(jù)更新問(wèn)題
在項(xiàng)目中使用<keep-alive>包含<router-view>實(shí)現(xiàn)頁(yè)面緩存，加速頁(yè)面加載，
同時(shí)，這種方式帶來(lái)一些弊端，請(qǐng)看如下大神解釋?zhuān)?/strong>
****************************************************************************
當(dāng)引入keep-alive的時(shí)候，頁(yè)面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。
當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。
****************************************************************************
這就帶來(lái)一個(gè)問(wèn)題，之前在項(xiàng)目中使用mounted在頁(yè)面加載時(shí)獲取數(shù)據(jù)，使用<keep-alive>后方法不再生效，
根據(jù)上面的解釋?zhuān)瑢ounted替換為activated即可。
以上這篇Vue2.0 實(shí)現(xiàn)頁(yè)面緩存和不緩存的方式就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 2.0的數(shù)據(jù)依賴(lài)實(shí)現(xiàn)原理代碼簡(jiǎn)析
本篇文章主要介紹了Vue 2.0的數(shù)據(jù)依賴(lài)實(shí)現(xiàn)原理代碼簡(jiǎn)析，主要從初始化的數(shù)據(jù)層面上分析了Vue是如何管理依賴(lài)來(lái)到達(dá)數(shù)據(jù)的動(dòng)態(tài)響應(yīng)，有興趣的可以了解一下2017-07-07
vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式
這篇文章主要介紹了vue對(duì)插件(iview,elementui,treeselect)樣式的局部修改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07
這篇文章主要介紹了Vue2的diff算法規(guī)則原理詳解，diff?算法，就是通過(guò)比對(duì)新舊兩個(gè)虛擬節(jié)點(diǎn)不一樣的地方，針對(duì)那些不一樣的地方進(jìn)行新增或更新或刪除操作。接下來(lái)我們?cè)敿?xì)介紹節(jié)點(diǎn)更新的過(guò)程2022-06-06
vue跳轉(zhuǎn)頁(yè)面并且實(shí)現(xiàn)參數(shù)傳遞接受示例
這篇文章主要為大家介紹了vue跳轉(zhuǎn)頁(yè)面并且實(shí)現(xiàn)參數(shù)傳遞接受示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-06-06
這篇文章主要介紹了vue的三種圖片引入方式代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2019-11-11
vue3新特性中最重要、內(nèi)容最多的組合式api,組合式api既可以解決之前vue2開(kāi)發(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，簡(jiǎn)單的說(shuō)就是要將其封裝成SVG，并且支持動(dòng)態(tài)修改顏色，需要的朋友可以參考下2022-08-08
vue+animation實(shí)現(xiàn)翻頁(yè)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue+animation實(shí)現(xiàn)翻頁(yè)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06![vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法](http://img.jbzj.com/images/xgimg/bcimg8.png)
vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法
這篇文章主要介紹了在vue中使用[provide/inject]實(shí)現(xiàn)頁(yè)面reload的方法，文中給大家提到了在vue中實(shí)現(xiàn)頁(yè)面刷新不同的方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-09-09
vue實(shí)現(xiàn)在表格里,取每行的id的方法
下面小編就為大家分享一篇vue實(shí)現(xiàn)在表格里,取每行的id的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03