vue 重新整理目前頁面(provide / inject 組合)

1.location. reload()

this.$router.go(0)

重新整理的時候會重新加載，有一個空白閃爍過程。

2.provide / inject 組合

通過聲明reload方法，控制router-view的顯示或隐藏，進而控制頁面的再次加載，然後在需要目前頁面重新整理的頁面中注入App.vue元件提供（provide）的 reload 依賴，然後直接用this.reload來調用就行；

示例：

app.vue

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

<script>
import axios from "axios";
export default {
  name: "App",
  provide() {
    return {
      reload: this.reload
    };
  },
  data() {
    return {
      isRouterAlive: true
    };
  },
  mounted() {
  },
  methods: {
    reload() {
      this.isRouterAlive = false;
      this.$nextTick(function() {
        this.isRouterAlive = true;
      });
    }
}
}
           

需要重新加載的頁面：

注：

• provide / inject

  2.2.0 新增

• 類型：
  • provide：

    Object | () => Object

  • inject：

    Array<string> | { [key: string]: string | Symbol | Object }

• 詳細：

  provide

   和 

  inject

   主要在開發高階插件/元件庫時使用。并不推薦用于普通應用程式代碼中。

  這對選項需要一起使用，以允許一個祖先元件向其所有子孫後代注入一個依賴，不論元件層次有多深，并在其上下遊關系成立的時間裡始終生效。如果你熟悉 React，這與 React 的上下文特性很相似。

  provide

   選項應該是一個對象或傳回一個對象的函數。該對象包含可注入其子孫的 property。在該對象中你可以使用 ES2015 Symbols 作為 key，但是隻在原生支援 

  Symbol

   和 

  Reflect.ownKeys

   的環境下可工作。

  inject

   選項應該是：
  • 一個字元串數組，或
  • 一個對象，對象的 key 是本地的綁定名，value 是：
    • 在可用的注入内容中搜尋用的 key (字元串或 Symbol)，或
    • 一個對象，該對象的：

      • from

         property 是在可用的注入内容中搜尋用的 key (字元串或 Symbol)

      • default

         property 是降級情況下使用的 value

  提示：

  provide

   和 

  inject

   綁定并不是可響應的。這是刻意為之的。然而，如果你傳入了一個可監聽的對象，那麼其對象的 property 還是可響應的。