问题:

最近些日子项目中突然碰到了一个需求，再完成编辑操作之后需要进行页面刷新，通过实验有如下几种姿势可以解决需求中的问题，下面进行简单总结如下。

姿势一：this.$router.go(0)
这个姿势是利用了 history 中前进和后退的功能，传入 0 刷新当前页面。但是有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果不好。

this.$router.go(0)

姿势二：location.reload()

这个姿势是利用了直接使用刷新当前页面的方法。但是同样存在有一个问题就是页面整个刷新过程中会白屏，严重影响用户的体验感，效果也是不好，和姿势一的现象一直，也不推荐使用。

location.reload()

姿势三：provide / inject组合(推荐使用)

允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。
provide：选项应该是一个对象或返回一个对象的函数。该对象包含可注入其子孙的属性。
inject：一个字符串数组，或一个对象，对象的 key 是本地的绑定名。
注意：provide和inject绑定并不是可响应的。这是刻意为之的。如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

基本使用步骤如下：

步骤一：（App.vue）
通过 $nextTick()，协助实现。先把 移除，移除后再重新添加，达到刷新当前页面的功能。是目前最合适的实现方式。

<template>
 <div id="app">
   <router-view v-if="isRouterAlive"/>
 </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>

步骤二：（chapter.vue）

inject: ['reload'],

代码结构

步骤三：（chapter.vue）
直接this.reload()调用，即可刷新当前页面。

this.reload()// 需要刷新页面

vue刷新当前页面有挺多种方法，比如

window.location.reload()

或者

this.$router.go(0)

但是这两种方法是会出现一瞬间的白屏，体验不好，所以这里给大家推荐第三种比较好用的刷新页面的方法

在app.vue的<router-view></router-view>加上v-if属性

<router-view v-if="isRouterAlive"></router-view>

在data里面加上isRouterAlive,当然这个属性名可以自己定义，默认值为true

  data () {
      return {
        isRouterAlive: true
      }
  }

methods里面加入一个刷新的方法

methods: {
    reload () {
      this.isRouterAlive = false
      this.$nextTick(function() {
         this.isRouterAlive = true
      })
    }
  }

最后，需要把这个函数 provide 出去

provide () {
    return {
      reload: this.reload
    }
  }

这样，app.vue上就设置完了

那么当我们需要刷新的时候，在需要的页面上加上这个函数就可以了

首先注入这个函数

inject: ['reload']

然后在需要用到这个函数的地方去引用就行了

refresh () {
  this.reload()
}

这样子就可以刷新页面了，而且不会出现白屏的情况，比前面两种方法好用，推荐大家使用。

附带上完整代码

<template>
  <div id="app">
    <div class="wrap">
      <router-view v-if="isRouterAlive"></router-view>
    </div>
  </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>
  #app{
    position: relative;
  }
  @media only screen and (min-width: 1200px) {
    .wrap{
      width: 65%;
      margin: 0 auto;
    }
  }
  
</style>

<template>
    <button @click="refresh"></button>
</template>
<script>
    export default{
        name: 'refresh',
        inject: ['reload'],
        methods: {
              refresh () {
                  this.reload()
              }
        }
    }
</script>

感谢大家看完，觉得有用的可以点一下喜欢，蟹蟹蟹蟹

需求是点击后进行带参数页面刷新

问题1 一开始是直接使用this.router.go(0)进行刷新的话无法对参数进行更新 Vue刷新当前页面几种方式

问题2 使用空白页跳转时第一次replace时会报错

于是进行资料查找把该文章的三种方法都尝试过后都没有效果（不知道为什么！）

最后想到当我直接replace（或者push）同一页面时虽然页面内容不刷新 ，但是浏览器URL已经改变。所以我在此时进行一次this.$router.go(0)来进行刷新完成效果（虽然有白屏）