vue 刷新当前页面

一.vue 刷新当前页面有很多种方法，例如
window.location.reload()
或者
this.$router.go(0)
二.但是这两种方法是会出现一瞬间白屏，用户体验不好，所以下面这种是比较好用的刷新页面的 方法
1.在app.vue中<router-view></router-view>上 加上v-if属性

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

2.在data里面加上 isRouterAlive ，这个属性名可以自己定义 随便的，默认值为true

data(){
    return{
          isRouterAlive:true
          }
      }

3.在methods里面加上一个刷新的方法 最后把这个函数 provide 出去

 methods:{
    reload() {
         this.isRouterAlive = false
         this.$nextTick( () => {
                 this.isRouterAlive = true
                })
          }
   },
 provide() {
    return {
           roload:this.reload
        }
    }

这样的话，app.vue上就设置完了
那么当我们要刷新页面的时候，在需要的页面上加上这个函数就可以了
1.首先页面要注入这个函数

inject:['reload']

2.在需要用到的这个函数的地方引用就行了

handleRefresh(){
    this.reload()
}

这样处理的话，刷新页面就不会出现瞬间白屏问题

三，最后总结一下需要注意的问题 一不小心就会犯错
1.inject:[reload] 要放在data的上面

inject:[reload],
data(){
     return{
    }
}

否则的话控制台报错 Maximum call stack size exceeded

本文转自
https://www.jianshu.com/p/b6d7db35b6e4