this.$router.go(0)

this.$router.go(0)
這種方法頁面會一瞬間的白屏，體驗不是很好，雖然只是一行程式碼的事

location.reload()

location.reload()
這種也是一樣，畫面一閃，效果總不是很好

provide、inject

3、搭配provide、inject使用

首先在主頁面 app.vue

Home.vue

    <keep-alive>
      <!--      //當前進入的路由 meta裡面 keepAlive為true時走這裡-->
      <router-view v-if="$route.meta.keepAlive" class="home-router"></router-view>
    </keep-alive>
    <!--    當前進入的路由 meta裡面 keepAlive為false時走這裡 下面 if 判斷進行了取反處理-->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
 

App.vue

<template>
  <div id="app">
    <!-- <router-view v-if="isRouterAlive"></router-view> -->
    <home v-if="isRouterAlive"></home>
  </div>
</template>

<script>
  import Home from './views/Home.vue';
  export default {
    name: "app",
    components: {
      Home
    },
    provide() {
      //父元件中通過provide來提供變數，在子元件中通過inject來注入變數。
      return {
        reload: this.reload
      };
    },
    data() {
      return {
        isRouterAlive: true //控制檢視是否顯示的變數
      };
    },
    methods: {
      reload() {
        this.isRouterAlive = false; //先關閉，
        this.$nextTick(function () {
          this.isRouterAlive = true; //再開啟
        });
      }
    }
  };
</script>


 

在需要重新整理的頁面匯入 inject: ['reload'],

呼叫重新整理：

 export default {
    inject: ["reload"],
    }
   `this.reload() `// 重新整理頁面

回退頁面 keeplive 快取問題

在router/index.js中新增路由元資訊，設定需要快取的頁面

    meta: {
      title:'trade.tradeTitle',
      keepAlive: true, // 此元件需要被快取
      isBack:false, //用於判斷上一個頁面是哪個
    }

鉤子函式的執行順序

不使用keep-alive

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

使用keep-alive

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

再次進入快取的頁面，只會觸發beforeRouteEnter -->activated --> deactivated 。created和mounted不會再執行。我們可以利用不同的鉤子函式，做不同的事。務必理解上述鉤子函式的執行時機和執行順序，本教程的核心就依賴於此鉤子函式
activated和deactivated是使用keep-alive後

beforeRouteEnter

在快取的頁面通過beforeRouteEnter鉤子函式中判斷是從哪個頁面過來的

    beforeRouteLeave(to, from, next) {
      // 路由導航鉤子，此時還不能獲取元件例項 `this`，所以無法在data中定義變數（利用vm除外）
      // 所以，利用路由元資訊中的meta欄位設定變數，方便在各個位置獲取。這就是為什麼在meta中定義isBack
      if (from.path === '/SnNavigationUp') {
        //判斷是從哪個路由過來的，
        //重新整理資料
        to.meta.isBack = false;
      } else {
        //不重新整理
        to.meta.isBack = true;
      }
      next();
    },

data

data中定義變數isFirstEnter用來判斷是否第一次進入，或是否重新整理了頁面，預設false

 data() {
    return {
      isFirstEnter:false,
    };
  },

created

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

      this.isFirstEnter = true;      // 只有第一次進入或者重新整理頁面後才會執行此鉤子函式      // 使用keep-alive後（2+次）進入不會再執行此鉤子函式      this.$nextTick(() => {        this.getall();      });

activated

activated中增加判斷條件

   activated() {      if (this.$route.meta.isBack || !this.isFirstEnter) {        // 如果isBack是false，表明需要獲取新資料，否則就不再請求，直接使用快取的資料        // 如果isFirstEnter是true，表明是第一次進入此頁面或使用者重新整理了頁面，需獲取新資料        this.$nextTick(() => {          this.getall();        });      } else {        this.$route.meta.isBack = false        this.isFirstEnter = false;      }    },

直接寫上也可以解決以上問題

activated() {          this.getall();    },

參考 https://blog.csdn.net/weixin_41164499/article/details/90718155