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.js彈出模態(tài)框組件開(kāi)發(fā)的示例代碼
本篇文章主要介紹了Vue.js彈出模態(tài)框組件開(kāi)發(fā)的示例代碼，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
這篇文章主要介紹了VUE程序調(diào)試的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-06-06
Vue 3 + Element Plus樹(shù)形表格全選多選及子節(jié)點(diǎn)勾選的問(wèn)題解決方
在本文中,我們解決了Vue 3和Element Plus樹(shù)形表格中的全選、多選、子節(jié)點(diǎn)勾選和父節(jié)點(diǎn)勾選等常見(jiàn)問(wèn)題,通過(guò)逐步實(shí)現(xiàn)這些功能,您可以構(gòu)建功能強(qiáng)大且用戶(hù)友好的樹(shù)形表格組件,以滿(mǎn)足各種數(shù)據(jù)展示需求,對(duì)Vue 3 Element Plus樹(shù)形表格相關(guān)知識(shí)感興趣的朋友一起看看吧2023-12-12
Vue2.0實(shí)現(xiàn)將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例
本篇文章主要介紹了Vue2.0實(shí)現(xiàn)將頁(yè)面中表格數(shù)據(jù)導(dǎo)出excel的實(shí)例，非常具有實(shí)用價(jià)值，感興趣的同學(xué)可以了解一下2017-08-08
Vue3中關(guān)于路由規(guī)則的props配置方式
這篇文章主要介紹了Vue3中關(guān)于路由規(guī)則的props配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
本文主要介紹了vue3中使用jsx的實(shí)現(xiàn)步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
淺談一下Vue生命周期中mounted和created的區(qū)別
每一個(gè)vue實(shí)例從創(chuàng)建到銷(xiāo)毀的過(guò)程，就是這個(gè)vue實(shí)例的生命周期,在這個(gè)過(guò)程中，他經(jīng)歷了從開(kāi)始創(chuàng)建、初始化數(shù)據(jù)、編譯模板、掛載Dom、渲染→更新→渲染、卸載等一系列過(guò)程,那么這些過(guò)程中，具體vue做了些啥，我們今天來(lái)了解一下2023-05-05
這篇文章主要介紹了vue組件之間相互傳值的方式，對(duì)vue感興趣的同學(xué)，可以參考下2021-05-05
解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問(wèn)題
下面小編就為大家分享一篇解決vue項(xiàng)目報(bào)錯(cuò)webpackJsonp is not defined問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-03-03
今天小編就為大家分享一篇解決vue props 拿不到值的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09