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