vue中keep-alive實現前進刷新后退不刷新

利用keep-alive標簽實現前進刷新后退不刷新

需求:路由前進式能夠刷新數據, 返回時頁面保存之前的操作.

>修改App.vue中router-view, 根據路由中meta字段設置的變量判斷是否被展示

<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>
  </div>
</template>

>在router/index.js中添加meta字段

{
     path: '/PointsList',
     name: 'PointsList',
     component: () => import('@/views/PointsList'),
     meta: {
          keepAlive: true, // 判斷該組件是否需要緩存
          isBack: false // 判斷是不是返回操作
     }
}

>在對應的組件中

手動刷新之后沒有了緩存數據, 這時返回也需要重新加載頁面獲取數據, 這里在data中定義變量判斷

   data() {
     return {
       isFirstEnter:false // 定義變量來判斷是否第一次進入，默認false
     };
   }

created中把isFirstEnter變為true，說明是第一次進入或刷新了頁面

created() {
     this.isFirstEnter=true;
     // 只有第一次進入或者刷新頁面后才會執行此鈎子函數
     // 使用keep-alive后（2+次）進入不會再執行此鈎子函數
 }

beforeRouteEnter中判斷是從哪個頁面過來的

beforeRouteEnter(to, from, next) {
    if (from.name == "page") {
      // 這個name是下一級頁面的路由name
      to.meta.isBack = true; // 設置為true說明你是返回到這個頁面，而不是通過跳轉從其他頁面進入到這個頁面
    }
    next();
  }

activated中執行獲取數據的方法

因為這個頁面需要緩存。只有第一次進入時才會執行created和mounted方法，再次進入就不執行了。而activated每次進入都執行，所以在這個鈎子函數中獲取數據

   activated() {
     if(!this.$route.meta.isBack || this.isFirstEnter){
         // 如果isBack是false，表明需要獲取新數據，否則就不再請求，直接使用緩存的數據
         // 如果isFirstEnter是true，表明是第一次進入此頁面或用戶刷新了頁面，需獲取新數據
         this.str=''// 把數據清空，可以稍微避免讓用戶看到之前緩存的數據
         this.getData();
     }
     // 恢復成默認的false，避免isBack一直是true，導致下次無法獲取數據
     this.$route.meta.isBack=false
     // 恢復成默認的false，避免isBack一直是true，導致每次都獲取新數據
     this.isFirstEnter=false;
 
   }