vue keep-alive請(qǐng)求數(shù)據(jù)的方法示例
背景
index頁(yè)面:首頁(yè)品牌入口
list頁(yè)面:商品列表頁(yè)面
product頁(yè)面:商品詳情頁(yè)面
從index頁(yè)面進(jìn)入list的時(shí)候要刷新頁(yè)面,從product頁(yè)面返回list的時(shí)候不需要刷新頁(yè)面,所以list使用了keep-alive的屬性,keepAlive設(shè)置為true,但是開(kāi)發(fā)過(guò)程中發(fā)現(xiàn)一個(gè)問(wèn)題,從product返回到list的時(shí)候,列表頁(yè)面不是正確的品牌列表,而是之前一次點(diǎn)擊的品牌列表。由于每個(gè)人遇到關(guān)于keep-alive請(qǐng)求數(shù)據(jù)不正確的問(wèn)題不同,這里就直接說(shuō)我的解決辦法。希望能給大家一個(gè)思路。
解決辦法
很多人都會(huì)通過(guò)修改keepAlive來(lái)改變keep-alive,我嘗試后還是不行,就換了個(gè)思路
鉤子函數(shù)的執(zhí)行順序
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
先掃盲,多少人和我都不知道上面的知識(shí),在keep-alive的頁(yè)面中,可以在 activated獲取this.$route.params的參數(shù)
避開(kāi)了設(shè)置keepAlive導(dǎo)致product返回的時(shí)候數(shù)據(jù)不對(duì),當(dāng)頁(yè)面進(jìn)入list的時(shí)候都是緩存狀態(tài),然后再通過(guò)是不是由index進(jìn)入來(lái)判斷是否執(zhí)行activated里的函數(shù),
list.vue
beforeRouteEnter(to, from, next) {
//判斷從index頁(yè)面進(jìn)入,將list的isBack設(shè)置為true
//這樣就可以請(qǐng)求數(shù)據(jù)了
if (from.name == 'index') {
to.meta.isBack = true;
}
next();
},
activated: function () {
if (this.$route.meta.isBack || this.isFirstEnter) {
//清理已有商品列表的數(shù)據(jù),重新請(qǐng)求數(shù)據(jù),如果不清除的話(huà)就會(huì)有之前的商品緩存,延遲顯示最新的商品
this.proData = [];
//請(qǐng)求數(shù)據(jù)
this.fetchData();
}
//重新設(shè)置當(dāng)前路由的isBack
this.$route.meta.isBack = false;
//重新設(shè)置是否第一次進(jìn)入
this.isFirstEnter = false;
},
mounted: function () {
//如果是第一次進(jìn)入,或者刷新操作的話(huà),也請(qǐng)求數(shù)據(jù)
this.isFirstEnter = true;
},
router.js
const appRouter = {
mode: "history",
base: "/m/",
routes: [
{
path: "",
redirect: "/index"
},
{
path: "/index",
name: "index",
component: Index,
meta: {
keepAlive: true
}
},
{
path: "/list",
name: "list",
component: List,
meta: {
keepAlive: true,
isBack: false //isback是true的時(shí)候請(qǐng)求數(shù)據(jù),或者第一次進(jìn)入的時(shí)候請(qǐng)求數(shù)據(jù)
}
},
{
path: "/product/:id",
name: "product",
component: Product,
meta: {
keepAlive: false
}
}
]
};
Vue.use(Router);
export default new Router(appRouter);
不知道有咩有幫大家理清思路,有問(wèn)題可以留言,以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue 使某個(gè)組件不被 keep-alive 緩存的方法
- 解決vue keep-alive 數(shù)據(jù)更新的問(wèn)題
- vue2使用keep-alive緩存多層列表頁(yè)的方法
- 基于vue中keep-alive緩存問(wèn)題的解決方法
- 詳解關(guān)于Vue2.0路由開(kāi)啟keep-alive時(shí)需要注意的地方
- Vue中 key keep-alive的實(shí)現(xiàn)原理
- vue解決使用webpack打包后keep-alive不生效的方法
- vue 中的keep-alive實(shí)例代碼
- vue.js內(nèi)置組件之keep-alive組件使用
- vue中keep-alive的用法及問(wèn)題描述
- vue中進(jìn)入詳情頁(yè)記住滾動(dòng)位置的方法(keep-alive)
相關(guān)文章
解決vue 子組件修改父組件傳來(lái)的props值報(bào)錯(cuò)問(wèn)題
今天小編就為大家分享一篇解決vue 子組件修改父組件傳來(lái)的props值報(bào)錯(cuò)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于treeSelect樹(shù)組件設(shè)置父節(jié)點(diǎn)禁用的相關(guān)資料,文中通過(guò)圖文以及示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2022-12-12
vue實(shí)現(xiàn)圖片下載點(diǎn)擊按鈕彈出本地窗口選擇自定義保存路徑功能
vue前端實(shí)現(xiàn)前端下載,并實(shí)現(xiàn)點(diǎn)擊按鈕彈出本地窗口,選擇自定義保存路徑,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2023-12-12
使用md5在vue中的axios請(qǐng)求時(shí)加密API問(wèn)題
這篇文章主要介紹了使用md5在vue中的axios請(qǐng)求時(shí)加密API問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-01-01
Vue3中的ref為何要用.value進(jìn)行值的調(diào)用呢
這篇文章主要介紹了Vue3中的ref為何要用.value進(jìn)行值的調(diào)用,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-09-09
基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解
今天小編就為大家分享一篇基于vue中對(duì)鼠標(biāo)劃過(guò)事件的處理方式詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08

