Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作

更新時(shí)間：2020年07月26日 10:11:43 作者：weixin_34122604

這篇文章主要介紹了Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

activated: 英文原意：使活動(dòng)、觸發(fā)

在Vue的生命周期函數(shù)中，這個(gè)好像用的不是特別多？（也許只是在我的工作中這個(gè)用的不多，或者說(shuō)叫幾乎不用這個(gè)）

一、需求

前不久在項(xiàng)目中有這樣一個(gè)需求：

在訂單頁(yè)面的地址信息欄，默認(rèn)通過(guò)接口填充了一個(gè)已經(jīng)設(shè)置過(guò)的一個(gè)的默認(rèn)地址，現(xiàn)在要跳轉(zhuǎn)去地址列表重新選擇一個(gè)地址并回填到訂單頁(yè)面的地址信息位置

二、嘗試

常規(guī)操作：

我們通常會(huì)將通過(guò)接口請(qǐng)求數(shù)據(jù)的方法放在==created== 或者 ==mounted==這兩個(gè)生命周期中的一個(gè)里面調(diào)用。

但是我們知道，不管是我們剛進(jìn)入這個(gè)頁(yè)面還是從其他頁(yè)面返回這個(gè)頁(yè)面，這些生命周期都會(huì)走一遍。

問(wèn)題：

所以，即使你跳轉(zhuǎn)到下級(jí)頁(yè)面選好你所需的數(shù)據(jù)返回上一頁(yè)時(shí)，你所回填的數(shù)據(jù)又被從接口請(qǐng)求回來(lái)的數(shù)據(jù)給覆蓋了。。。，這并不是我們想要的效果?。?！

三、使用keep-alive

不想讓頁(yè)面加載數(shù)據(jù)？？？當(dāng)然可以，這時(shí)候==Keep-alive==登場(chǎng)了

vue2.0提供了一個(gè)keep-alive組件用來(lái)緩存組件,避免多次加載相應(yīng)的組件,減少性能消耗

1、緩存所有頁(yè)面

如果你想緩存所有的頁(yè)面，只需要修改下app.vue中的代碼即可

// app.vue
 
  <template>
   <div id="app">
    <keep-alive >
     <router-view></router-view>
    </keep-alive>
    <tabBar/>
   </div>
  </template>

2、緩存部分頁(yè)面

如果你想緩存部分頁(yè)面，有兩種方式：

(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, //該字段表示該頁(yè)面需要緩存
   },
   component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶加載
  },

(2)使用vue-router 2.0的新特性

2.0提供了include/exclude兩個(gè)屬性可以針對(duì)性緩存相應(yīng)的組件

app.vue

<keep-alive include="a,b">
  <router-view></router-view>
</keep-alive>

==注意==：上面代碼中的a,b是需要緩存的組件的name屬性值，不是路由的name值

使用keep-alive結(jié)論

當(dāng)你第一進(jìn)入需要緩存的頁(yè)面后，頁(yè)面數(shù)據(jù)被緩存下來(lái)，但是當(dāng)你再次進(jìn)入時(shí)，你會(huì)發(fā)現(xiàn)，頁(yè)面的數(shù)據(jù)還是之前的數(shù)據(jù)。。。。這也不是我們想要的效果?。。?！

四、activated配合keep-alive

首先，我們需要使用router.meta屬性，修改需要緩存的組件路由如下

// keepAlive和isback這兩個(gè)很重要！
{
   path: '/usermanage',
   name: 'usermanage',
   meta: {
    keepAlive: true, //該字段表示該頁(yè)面需要緩存
    isBack: false, //用于判斷上一個(gè)頁(yè)面是哪個(gè)
    title: '人員管理'
   },
   component: resolve => require(['@/views/userManage/userManage'], resolve) // 路由懶加載
  },

然后修改需要緩存的組件中的代碼(只放重點(diǎn)部分)：

<script>
 export default {
  name: 'currentName',
  data() {
   return {
  
    isFirstEnter: false, //
   }
  },
  beforeRouteEnter(to, from, next) {
   if (from.name == 'nextName') { // 這個(gè)name是下一級(jí)頁(yè)面的路由name
    to.meta.isBack = true; // 設(shè)置為true說(shuō)明你是返回到這個(gè)頁(yè)面，而不是通過(guò)跳轉(zhuǎn)從其他頁(yè)面進(jìn)入到這個(gè)頁(yè)面
   }
   next()
  },
  mounted() {
   
  },
  activated() {
   if (!this.$route.meta.isBack || this.isFirstEnter) {
    this.initData() // 這里許要初始化dada()中的數(shù)據(jù)
    this.getDataFn() // 這里發(fā)起數(shù)據(jù)請(qǐng)求，（之前是放在created或者mounted中，現(xiàn)在只需要放在這里就好了，不需要再在created或者mounted中請(qǐng)求?。。?
   }
   this.$route.meta.isBack = false //請(qǐng)求完后進(jìn)行初始化
   this.isFirstEnter = false;//請(qǐng)求完后進(jìn)行初始化
  },
 }
</script>

大功告成

這樣就實(shí)現(xiàn)了：從其他頁(yè)面跳轉(zhuǎn)到這個(gè)頁(yè)面時(shí)會(huì)請(qǐng)求數(shù)據(jù)，當(dāng)從下級(jí)頁(yè)面返回這個(gè)頁(yè)面時(shí)就不會(huì)重新請(qǐng)求數(shù)據(jù)

以上這篇Vue生命周期activated之返回上一頁(yè)不重新請(qǐng)求數(shù)據(jù)操作就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: