為什麼會有這篇文章

1 用vue-router 重新路由的時候到當前頁面的時候是不進行重新整理的
2 採用window.reload() 或者router.go(0) hisory.go(0) 重新整理的時候整個瀏覽器進行重新整理載入， 但是頁面閃爍， 體驗不好

解決辦法

方式一

先新建一個空白頁面， 先跳到空白頁面， 然後再從空白頁面跳轉回來 history.go(-1) 這樣的方式 在我這裡測試不成功

方式二

直接重新整理， 整體頁面重新整理 history(0) this.$router.push(“path”)

  this.$router.push('/personal_base');
 

方式三

比較終極解決辦法， 頁面閃爍是不存在的， 幾乎沒有啥毛病。
provide /inject 組合

作用是： 允許一個祖先元件向其所有子孫後代注入一個依賴， 無論元件層次有多深，並在其上下游關係成立時間裡始終生效。

App.vue 檔案中 修改檔案 整個配置如此：

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


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

  }
</script>

<style lang="less">
  @import './style/common';
</style>

在頁面應用

inject: ['reload'],



this.reload();

新加的配置標記如下：

應用

具體原因知識 簡單介紹
provide /injext
provide: 選項應該是一個物件或者返回一個物件的函式。 該物件包含可注入其子孫的屬性。
inject : 一個字串陣列或者一個物件，物件的 key 是本地的繫結名

提示：provide和inject繫結並不是可響應的。這是刻意為之的。如果你傳入了一個可監聽的物件，那麼其物件的屬性還是可響應的。