Vue生命週期activated之返回上一頁不重新請求資料

重慶崽兒brand發表於2018-08-23
Vue

原文地址：原文地址

activated: 英文原意：使活動、觸發

在Vue的生命週期函式中，這個好像用的不是特別多？（也許只是在我的工作中這個用的不多，或者說叫幾乎不用這個）

一、需求

前不久在專案中有這樣一個需求：

在訂單頁面的地址資訊欄，預設通過介面填充了一個已經設定過的一個的預設地址，現在要跳轉去地址列表重新選擇一個地址並回填到訂單頁面的地址資訊位置

二、嘗試

常規操作：

我們通常會將通過介面請求資料的方法放在==created== 或者 ==mounted==這兩個生命週期中的一個裡面呼叫。

但是我們知道，不管是我們剛進入這個頁面還是從其他頁面返回這個頁面，這些生命週期都會走一遍。

問題：

所以，即使你跳轉到下級頁面選好你所需的資料返回上一頁時，你所回填的資料又被從介面請求回來的資料給覆蓋了。。。，這並不是我們想要的效果！！！

三、使用keep-alive

不想讓頁面載入資料？？？當然可以，這時候==Keep-alive==登場了

vue2.0提供了一個keep-alive元件用來快取元件,避免多次載入相應的元件,減少效能消耗

1、快取所有頁面

如果你想快取所有的頁面，只需要修改下app.vue中的程式碼即可

// app.vue

    <template>
      <div id="app">
        <keep-alive >
          <router-view></router-view>
        </keep-alive>
        <tabBar/>
      </div>
    </template>
複製程式碼

2、快取部分頁面

如果你想快取部分頁面，有兩種方式：

(1)使用router.meta屬性

app.vue

// 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>
        <tabBar/>
      </div>
    </template>
複製程式碼

router.js

{
      path: '/usermanage',
      name: 'usermanage',
      meta: {
        keepAlive: true, //該欄位表示該頁面需要快取
      },
      component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶載入
    },
複製程式碼
(2)使用vue-router 2.0的新特性

2.0提供了include/exclude兩個屬性 可以針對性快取相應的元件

app.vue


<keep-alive include="a,b">
   <router-view></router-view>
</keep-alive>
複製程式碼

==注意==：上面程式碼中的a,b是需要快取的元件的name屬性值，不是路由的name值

使用keep-alive結論

當你第一進入需要快取的頁面後，頁面資料被快取下來，但是當你再次進入時，你會發現，頁面的資料還是之前的資料。。。。這也不是我們想要的效果！！！！

四、activated配合keep-alive

首先，我們需要使用router.meta屬性，修改需要快取的元件路由如下

// keepAlive和isback這兩個很重要！
{
      path: '/usermanage',
      name: 'usermanage',
      meta: {
        keepAlive: true, //該欄位表示該頁面需要快取
        isBack: false, //用於判斷上一個頁面是哪個
        title: '人員管理'
      },
      component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶載入
    },
複製程式碼

然後修改需要快取的元件中的程式碼(只放重點部分)：


<script>
  export default {
    name: 'currentName',
    data() {
      return {
    
        isFirstEnter: false, //
      }
    },
    beforeRouteEnter(to, from, next) {
      if (from.name == 'nextName') { // 這個name是下一級頁面的路由name
        to.meta.isBack = true; // 設定為true說明你是返回到這個頁面，而不是通過跳轉從其他頁面進入到這個頁面
      }
      next()
    },
    mounted() {
      
    },
    activated() {
      if (!this.$route.meta.isBack || this.isFirstEnter) {
        this.initData() // 這裡許要初始化dada()中的資料
        this.getDataFn() // 這裡發起資料請求，（之前是放在created或者mounted中，現在只需要放在這裡就好了，不需要再在created或者mounted中請求！！）
      }
      this.$route.meta.isBack = false //請求完後進行初始化
      this.isFirstEnter = false;//請求完後進行初始化
    },
  }
</script>
複製程式碼

大功告成

這樣就實現了：從其他頁面跳轉到這個頁面時會請求資料，當從下級頁面返回這個頁面時就不會重新請求資料

感謝閱讀

如有問題，歡迎留言指出，一起學習，一起進步

相關文章