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>