Vue.jsプロジェクト現在のルーティングのリフレッシュ

転載:https://www.jianshu.com/p/72cdad357267
プロジェクトで発生した要件は、ジャンプしたルーティングが現在のルーティングと一致する場合、現在のページをリフレッシュします.
Windowsを使いたいと思っていました.location.reload()は、現在のページを強制的にリフレッシュします.質問:ブラウザが再ロードされ、ページの点滅と空白が発生し、ユーザー体験が大幅に低下しました.だからこの排除.
解決策(vueのオプション/組合せprovide/injectを使用)
このオプションは、コンポーネントの階層がどのように深いかにかかわらず、上下関係が成立する時間にVueから有効になるように、祖先コンポーネントがすべての子孫コンポーネントに依存することを可能にするために組み合わせられます.js公式サイトの説明

// App.vue  
<template>
  <router-view v-if="isShow" />
</template>
<sciprt>
 export default () {
     
    name: 'App',
    data () {
     
      return {
     
        //   router-view      
        isShow: true
      }
    },
    
    //           
    provide () {
     
      return {
     
        reload: this.reload
      }
    },

    //   reload  
    methods: {
     
      reload () {
     
        //    
        this.isShow = false
        
        // $nextTick()          DOM         
        this.$nextTick(() => {
     
          this.isShow = true
        })
      }
    }
  }
</script> 

// NavBar.vue     
<template>
  <div class="nav-bar">
    //      .native   ，  router-link   a       
    <router-link :to="{name: 'Index'}" @click.native="showRouter">  </router-link>
    <router-link :to="{name: 'Index'}" @click.native="showRouter">  </router-link>
  </div>
</template>
<script>
export default {
     
  name: 'NavBar',
  //        
  inject: [
    'reload'
  ],
  methods: {
     
    showRouter () {
     
      //   reload  ，      
      this.reload()
    }
  }
}
</script>