vue keep-alive請求數(shù)據(jù)的方法示例
背景
index頁面:首頁品牌入口
list頁面:商品列表頁面
product頁面:商品詳情頁面
從index頁面進(jìn)入list的時候要刷新頁面,從product頁面返回list的時候不需要刷新頁面,所以list使用了keep-alive的屬性,keepAlive設(shè)置為true,但是開發(fā)過程中發(fā)現(xiàn)一個問題,從product返回到list的時候,列表頁面不是正確的品牌列表,而是之前一次點擊的品牌列表。由于每個人遇到關(guān)于keep-alive請求數(shù)據(jù)不正確的問題不同,這里就直接說我的解決辦法。希望能給大家一個思路。
解決辦法
很多人都會通過修改keepAlive來改變keep-alive,我嘗試后還是不行,就換了個思路
鉤子函數(shù)的執(zhí)行順序
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
先掃盲,多少人和我都不知道上面的知識,在keep-alive的頁面中,可以在 activated獲取this.$route.params的參數(shù)
避開了設(shè)置keepAlive導(dǎo)致product返回的時候數(shù)據(jù)不對,當(dāng)頁面進(jìn)入list的時候都是緩存狀態(tài),然后再通過是不是由index進(jìn)入來判斷是否執(zhí)行activated里的函數(shù),
list.vue
beforeRouteEnter(to, from, next) { //判斷從index頁面進(jìn)入,將list的isBack設(shè)置為true //這樣就可以請求數(shù)據(jù)了 if (from.name == 'index') { to.meta.isBack = true; } next(); }, activated: function () { if (this.$route.meta.isBack || this.isFirstEnter) { //清理已有商品列表的數(shù)據(jù),重新請求數(shù)據(jù),如果不清除的話就會有之前的商品緩存,延遲顯示最新的商品 this.proData = []; //請求數(shù)據(jù) this.fetchData(); } //重新設(shè)置當(dāng)前路由的isBack this.$route.meta.isBack = false; //重新設(shè)置是否第一次進(jìn)入 this.isFirstEnter = false; }, mounted: function () { //如果是第一次進(jìn)入,或者刷新操作的話,也請求數(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ù)據(jù),或者第一次進(jìn)入的時候請求數(shù)據(jù) } }, { path: "/product/:id", name: "product", component: Product, meta: { keepAlive: false } } ] }; Vue.use(Router); export default new Router(appRouter);
不知道有咩有幫大家理清思路,有問題可以留言,以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vue 使某個組件不被 keep-alive 緩存的方法
- 解決vue keep-alive 數(shù)據(jù)更新的問題
- vue2使用keep-alive緩存多層列表頁的方法
- 基于vue中keep-alive緩存問題的解決方法
- 詳解關(guān)于Vue2.0路由開啟keep-alive時需要注意的地方
- Vue中 key keep-alive的實現(xiàn)原理
- vue解決使用webpack打包后keep-alive不生效的方法
- vue 中的keep-alive實例代碼
- vue.js內(nèi)置組件之keep-alive組件使用
- vue中keep-alive的用法及問題描述
- vue中進(jìn)入詳情頁記住滾動位置的方法(keep-alive)
相關(guān)文章
vue項目如何設(shè)置全局字體樣式font-family
這篇文章主要介紹了vue項目如何設(shè)置全局字體樣式font-family問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11一篇文章帶你了解vue.js的事件循環(huán)機(jī)制
這篇文章主要為大家詳細(xì)介紹了vue.js事件循環(huán)機(jī)制,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助2022-03-03