vue单页面html缓存问题,vue单页面 回退页面 keeplive 缓存问题
場(chǎng)景：項(xiàng)目中遇到 vue 點(diǎn)擊回退 從A頁(yè)跳到B頁(yè)，緩存A頁(yè)，當(dāng)B頁(yè)狀態(tài)修改再次返回A時(shí)，A頁(yè)查詢(xún)條件緩存不刷新，列表刷新
A頁(yè)：
B頁(yè)：
html
解決方法：
利用keep-alive 緩存須要緩存的頁(yè)面
1.在app.vue中改寫(xiě)router-viewvue
2.在router/index.js中添加路由元信息，設(shè)置須要緩存的頁(yè)面
keepAlive:設(shè)置須要緩存的頁(yè)面
isBack:經(jīng)過(guò)beforeRouteEnter這個(gè)鉤子函數(shù)中的from參數(shù)判斷是從哪一個(gè)頁(yè)面過(guò)來(lái)的，這個(gè)參數(shù)執(zhí)行時(shí)，組件實(shí)例還沒(méi)建立，不能在data中定義變量。因此咱們能夠在路由中定義一個(gè)變量isBack，用來(lái)判斷。webpack
{
path: '/trade',
name: 'trade',
component: () => import( /* webpackChunkName: "about" */ '@/views/trade.vue'),
meta: {
title:'trade.tradeTitle',
keepAlive: true, // 此組件須要被緩存
isBack:false, //用于判斷上一個(gè)頁(yè)面是哪一個(gè)
}
},
{
path: '/detail/:id',
name: 'detail',
component: () => import( /* webpackChunkName: "about" */ '@/views/detail.vue'),
meta: {
title:'trade.detailTitle',
keepAlive: false,
isBack:false,//用于判斷上一個(gè)頁(yè)面是哪一個(gè)
}
},
鉤子函數(shù)的執(zhí)行順序:
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次進(jìn)入緩存的頁(yè)面，只會(huì)觸發(fā)beforeRouteEnter -->activated --> deactivated 。created和mounted不會(huì)再執(zhí)行。咱們能夠利用不一樣的鉤子函數(shù)，作不一樣的事。務(wù)必理解上述鉤子函數(shù)的執(zhí)行時(shí)機(jī)和執(zhí)行順序，本教程的核心就依賴(lài)于此鉤子函數(shù)
activated和deactivated是使用keep-alive后，vue中比較重要的兩個(gè)鉤子函數(shù)，建議詳細(xì)了解下。web
在A頁(yè)面中經(jīng)過(guò)beforeRouteEnter這個(gè)鉤子函數(shù)中判斷是從哪一個(gè)頁(yè)面過(guò)來(lái)的
beforeRouteLeave(to, from, next) {
// 路由導(dǎo)航鉤子，此時(shí)還不能獲取組件實(shí)例 `this`，因此沒(méi)法在data中定義變量(利用vm除外)
// 參考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
// 因此，利用路由元信息中的meta字段設(shè)置變量，方便在各個(gè)位置獲取。這就是為何在meta中定義isBack
// 參考 https://router.vuejs.org/zh-cn/advanced/meta.html
if (from.path === '/detail'){
//判斷是從哪一個(gè)路由過(guò)來(lái)的，
//若是是B頁(yè)面即detail頁(yè)面過(guò)來(lái)的，代表當(dāng)前頁(yè)面不須要刷新獲取新數(shù)據(jù)，直接用以前緩存的數(shù)據(jù)便可
to.meta.isBack = true;
}else{
to.meta.isBack = false;
}
next();
},
data中定義變量isFirstEnter用來(lái)判斷是否第一次進(jìn)入，或是否刷新了頁(yè)面，默認(rèn)false
data() {
return {
isFirstEnter:false,
};
},
created中把isFirstEnter變?yōu)閠rue，說(shuō)明是第一次進(jìn)入或刷新了頁(yè)面
created() {
this.isFirstEnter=true;
// 只有第一次進(jìn)入或者刷新頁(yè)面后才會(huì)執(zhí)行此鉤子函數(shù)
// 使用keep-alive后(2+次)進(jìn)入不會(huì)再執(zhí)行此鉤子函數(shù)
this.$nextTick(() => {
this.getLists();
});
},
activated中增長(zhǎng)判斷條件
activated() {
if(this.$route.meta.isBack || !this.isFirstEnter){
// 若是isBack是false，代表須要獲取新數(shù)據(jù)，不然就再也不請(qǐng)求，直接使用緩存的數(shù)據(jù)
// 若是isFirstEnter是true，代表是第一次進(jìn)入此頁(yè)面或用戶(hù)刷新了頁(yè)面，需獲取新數(shù)據(jù)
this.tradeList=[]
this.AjaxList = [] //把數(shù)據(jù)清空，能夠稍微避免讓用戶(hù)看到以前緩存的數(shù)據(jù)
this.pageNum = 1;
this.$nextTick(() => {
this.getLists();
});
}else{
this.$route.meta.isBack=false
this.isFirstEnter=false;
}
},
總結(jié)
以上是生活随笔為你收集整理的vue单页面html缓存问题,vue单页面 回退页面 keeplive 缓存问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： Ubuntu Server 之Apach
- 下一篇： 46. Permutations