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