vue中，一個(gè)列表頁從列表詳情頁返回需要被緩存，從其他頁面進(jìn)入列表不需要緩存，我在main.js中設(shè)置router.beforeEach((to, from, next) => {
Vue.prototype.fromurl = from.path;
Vue.prototype.tourl = to.meta; if(from.path.substr(3,4)=='shop'){ var bostonetop = $(window).scrollTop();
localStorage.setItem("bostonetop",bostonetop)
} else if(from.path.substr(3,13)=='special_field'){ var bostonetop = $(window).scrollTop();
localStorage.setItem("bostonetop",bostonetop)
} if (to.path.substr(3,4) =='shop') { if(from.path.substr(3,14)=='product_detail'){ // 思路是進(jìn)入列表頁并從詳情頁返回加載緩存，其他不加載緩存
to.meta.keepAlive = true; var bostonetop = localStorage.getItem("bostonetop")
$('html,body').animate({scrollTop:bostonetop}, 10);
}
}
else if (to.path.substr(3,13)=='special_field') { if(from.path.substr(3,14)=='product_detail'){
to.meta.keepAlive = true; var bostonetop = localStorage.getItem("bostonetop")
$('html,body').animate({scrollTop:bostonetop}, 10);
}
}else{
to.meta.keepAlive = false
}
next()
})App.vue<template>
<div id="app">
<keep-alive>
<router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>
</div></template>router.js { path: '/t/shop',
name: 'shop',
component: shop,
meta: {
keepAlive: true
}
},RT，思路是進(jìn)入該列表頁并從詳情頁返回加載緩存，其他不加載緩存。但是實(shí)際中所有頁面進(jìn)入該頁面中都產(chǎn)生了緩存；這不是我想要的，請問上述問題應(yīng)該如何解決？如何從其他頁面進(jìn)入該頁面不加載緩存并從詳情返回加載緩存？
2 回答
九州編程
TA貢獻(xiàn)1785條經(jīng)驗(yàn) 獲得超4個(gè)贊
將列表頁設(shè)置keepAlive:true
默認(rèn)需要緩存
beforeRouteEnter鉤子中判斷from然后決定是否需要重新調(diào)用獲取數(shù)據(jù)接口
偽代碼如下
new Vue({ methods:{ //獲取列表數(shù)據(jù)
getData(){ //數(shù)據(jù)請求部分省略
this.data = res.data;
}
},
beforeRouteEnter(to, from, next){ //如果不是從詳情頁進(jìn)入此組件
if(from.path !== '詳情頁path'){ //組件實(shí)例初始化后
next(vm => { //重新獲取數(shù)據(jù)
vm.getData()
});
} //else的情況不用判斷. 因?yàn)橹奥酚芍性O(shè)置了`keepAlive:true` 默認(rèn)會(huì)緩存
}
})題主可以試試這個(gè)思路
拙見,不足之處望指出
添加回答
舉報(bào)
0/150
提交
取消