vue 刷新當前頁面的方法

遇到一個頁面刷新的問題，記錄一下

1、this.$router.go(0)

這種方法頁面會一瞬間的白屏，體驗不是很好，雖然只是一行代碼的事

2、location.reload()

這種也是一樣，畫面一閃，效果總不是很好

3、跳轉空白頁再跳回原頁面

在需要頁面刷新的地方寫上：this.$router.push('/emptyPage')，跳轉到一個空白頁。在emptyPage.vue里beforeRouteEnter 鈎子里控制頁面跳轉，從而達到刷新的效果

beforeRouteEnter (to, from, next) {
      next(vm => {
        vm.$router.replace(from.path)
      })
}。

這種畫面雖不會一閃，但是能看見路由快速變化。

4、控制<router-view>的顯示隱藏

默認<router-view v-if="isRouterAlive" />isRouterAlive肯定是true，在需要刷新的時候把這個值設為false，接着再重新設為true：

this.isRouterAlive = false
this.$nextTick(function () {
  this.isRouterAlive = true
}這種方法從畫面上是看不出破綻的。也可以搭配provide、inject使用。例如：<template>

  <div id="app">
    <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>
然后在需要刷新的頁面引入依賴：inject: ['reload'],
在需要執行的地方直接調用方法即可：this.reload()。

第4種方法的詳細步驟參考該鏈接：https://www.jianshu.com/p/b6d7db35b6e4

參考鏈接如下：

https://www.cnblogs.com/qingqinglanlan/p/10131284.html

https://www.jianshu.com/p/b6d7db35b6e4