vue 實現返回上一頁不請求數據keep-alive

 

常規操做：

咱們一般會將經過接口請求數據的方法放在==created== 或者 ==mounted==這兩個生命週期中的一個裏面調用。

可是咱們知道，無論是咱們剛進入這個頁面仍是從其餘頁面返回這個頁面，這些生命週期都會走一遍。

問題：

因此，即便你跳轉到下級頁面選好你所需的數據返回上一頁時，你所回填的數據又被從接口請求回來的數據給覆蓋了。。。，這並非咱們想要的效果！！！

使用keep-alive

不想讓頁面加載數據？？？固然能夠，這時候==Keep-alive==登場了

 

vue2.0提供了一個keep-alive組件用來緩存組件,避免屢次加載相應的組件,減小性能消耗

一、緩存全部頁面

若是你想緩存全部的頁面，只須要修改下app.vue中的代碼便可

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

二、緩存部分頁面

若是你想緩存部分頁面，有兩種方式：

(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) // 路由懶加載
    },

3、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>

大功告成

這樣就實現了：從其餘頁面跳轉到這個頁面時會請求數據，當從下級頁面返回這個頁面時就不會從新請求數據

感謝閱讀

若有問題，歡迎留言指出，一塊兒學習，一塊兒進步