Vue2.0 實(shí)現(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)到緩存頁面的時(shí)候，會發(fā)現(xiàn)watch是不能監(jiān)聽路由的，是因?yàn)榫彺婧筒痪彺骓撁娣謩e在不同的div里面，一個(gè)div里面是不可能監(jiān)聽到另一個(gè)div的路由的，所有需要把監(jiān)聽的路由都加上緩存（在路由添加 meta: { keepAlive: true }），路由在緩存頁面之間進(jìn)行跳轉(zhuǎn)的時(shí)候，就可以通過監(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ù)更新問題
在項(xiàng)目中使用<keep-alive>包含<router-view>實(shí)現(xiàn)頁面緩存，加速頁面加載，
同時(shí)，這種方式帶來一些弊端，請看如下大神解釋：
****************************************************************************
當(dāng)引入keep-alive的時(shí)候，頁面第一次進(jìn)入，鉤子的觸發(fā)順序created-> mounted-> activated，退出時(shí)觸發(fā)deactivated。
當(dāng)再次進(jìn)入（前進(jìn)或者后退）時(shí)，只觸發(fā)activated。
****************************************************************************
這就帶來一個(gè)問題，之前在項(xiàng)目中使用mounted在頁面加載時(shí)獲取數(shù)據(jù)，使用<keep-alive>后方法不再生效，
根據(jù)上面的解釋，將mounted替換為activated即可。
以上這篇Vue2.0 實(shí)現(xiàn)頁面緩存和不緩存的方式就是小編分享給大家的全部內(nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了Vue.js彈出模態(tài)框組件開發(fā)的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了VUE程序調(diào)試的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
Vue 3 + Element Plus樹形表格全選多選及子節(jié)點(diǎn)勾選的問題解決方
在本文中,我們解決了Vue 3和Element Plus樹形表格中的全選、多選、子節(jié)點(diǎn)勾選和父節(jié)點(diǎn)勾選等常見問題,通過逐步實(shí)現(xiàn)這些功能,您可以構(gòu)建功能強(qiáng)大且用戶友好的樹形表格組件,以滿足各種數(shù)據(jù)展示需求,對Vue 3 Element Plus樹形表格相關(guān)知識感興趣的朋友一起看看吧2023-12-12
Vue2.0實(shí)現(xiàn)將頁面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)將頁面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例，非常具有實(shí)用價(jià)值，感興趣的同學(xué)可以了解一下2017-08-08
Vue3中關(guān)于路由規(guī)則的props配置方式
這篇文章主要介紹了Vue3中關(guān)于路由規(guī)則的props配置方式,具有很好的參考價(jià)值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個(gè)vue實(shí)例從創(chuàng)建到銷毀的過程，就是這個(gè)vue實(shí)例的生命周期,在這個(gè)過程中，他經(jīng)歷了從開始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過程,那么這些過程中，具體vue做了些啥，我們今天來了解一下2023-05-05
這篇文章主要介紹了vue組件之間相互傳值的方式，對vue感興趣的同學(xué)，可以參考下2021-05-05
解決vue項(xiàng)目報(bào)錯webpackJsonp is not defined問題
下面小編就為大家分享一篇解決vue項(xiàng)目報(bào)錯webpackJsonp is not defined問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
今天小編就為大家分享一篇解決vue props 拿不到值的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09