欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue keep-alive請求數據的方法示例

 更新時間:2018年05月16日 09:20:14   作者:37度檸檬水  
本篇文章主要介紹了vue keep-alive請求數據的方法示例,小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧

背景

index頁面:首頁品牌入口

list頁面:商品列表頁面

product頁面:商品詳情頁面

從index頁面進入list的時候要刷新頁面,從product頁面返回list的時候不需要刷新頁面,所以list使用了keep-alive的屬性,keepAlive設置為true,但是開發(fā)過程中發(fā)現一個問題,從product返回到list的時候,列表頁面不是正確的品牌列表,而是之前一次點擊的品牌列表。由于每個人遇到關于keep-alive請求數據不正確的問題不同,這里就直接說我的解決辦法。希望能給大家一個思路。

解決辦法

很多人都會通過修改keepAlive來改變keep-alive,我嘗試后還是不行,就換了個思路

鉤子函數的執(zhí)行順序

不使用keep-alive

beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive

beforeRouteEnter --> created --> mounted --> activated --> deactivated

先掃盲,多少人和我都不知道上面的知識,在keep-alive的頁面中,可以在 activated獲取this.$route.params的參數

避開了設置keepAlive導致product返回的時候數據不對,當頁面進入list的時候都是緩存狀態(tài),然后再通過是不是由index進入來判斷是否執(zhí)行activated里的函數,

list.vue 

   beforeRouteEnter(to, from, next) {
   //判斷從index頁面進入,將list的isBack設置為true
   //這樣就可以請求數據了
     if (from.name == 'index') {
      to.meta.isBack = true;
     }
     next();
   },
   activated: function () {
     if (this.$route.meta.isBack || this.isFirstEnter) {
      //清理已有商品列表的數據,重新請求數據,如果不清除的話就會有之前的商品緩存,延遲顯示最新的商品
      this.proData = [];
      //請求數據
      this.fetchData();
     }
     //重新設置當前路由的isBack
     this.$route.meta.isBack = false;
     //重新設置是否第一次進入
     this.isFirstEnter = false;
   },
   mounted: function () {
    //如果是第一次進入,或者刷新操作的話,也請求數據
     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的時候請求數據,或者第一次進入的時候請求數據
   }
  },
  {
   path: "/product/:id",
   name: "product",
   component: Product,
   meta: {
    keepAlive: false
   }
  }
  
 ]
};

Vue.use(Router);
export default new Router(appRouter);

不知道有咩有幫大家理清思路,有問題可以留言,以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。

相關文章

  • Vue.directive使用注意(小結)

    Vue.directive使用注意(小結)

    這篇文章主要介紹了Vue.directive使用注意(小結),小編覺得挺不錯的,現在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2018-08-08
  • vue3中vue.config.js配置及注釋詳解

    vue3中vue.config.js配置及注釋詳解

    在Vue 3.0中,與2.0版本相比有一定的差別,最明顯的就是缺少了build、config文件夾,下面這篇文章主要給大家介紹了關于vue3中vue.config.js配置及注釋的相關資料,需要的朋友可以參考下
    2022-08-08
  • vue.js實現選項卡切換

    vue.js實現選項卡切換

    這篇文章主要為大家詳細介紹了vue.js實現選項卡切換功能,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-03-03
  • vue里面父組件修改子組件樣式的方法

    vue里面父組件修改子組件樣式的方法

    下面小編就為大家分享一篇vue里面父組件修改子組件樣式的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-02-02
  • vue項目如何設置全局字體樣式font-family

    vue項目如何設置全局字體樣式font-family

    這篇文章主要介紹了vue項目如何設置全局字體樣式font-family問題,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
    2023-11-11
  • 一篇文章帶你了解vue.js的事件循環(huán)機制

    一篇文章帶你了解vue.js的事件循環(huán)機制

    這篇文章主要為大家詳細介紹了vue.js事件循環(huán)機制,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來幫助
    2022-03-03
  • idea編譯器vue縮進報錯問題場景分析

    idea編譯器vue縮進報錯問題場景分析

    idea編譯器出現Vue縮進報錯,怎么解決呢,很多朋友遇到這個問題都很棘手,不知該如何解決,今天小編給大家通過場景分析介紹解決方案,需要的朋友參考下吧
    2021-07-07
  • vue props 單項數據流實例分享

    vue props 單項數據流實例分享

    在本篇文章里小編給大家分享的是一篇關于vue props 單項數據流實例分享內容,需要的朋友們可以參考下。
    2020-02-02
  • Vue實現購物車功能

    Vue實現購物車功能

    本篇文章主要分享了Vue實現購物車功能的實例代碼。具有很好的參考價值。下面跟著小編一起來看下吧
    2017-04-04
  • Vue中父子組件如何實現傳值

    Vue中父子組件如何實現傳值

    這篇文章主要介紹了Vue中父子組件如何實現傳值,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教
    2023-01-01

最新評論