vue刷新當前頁面

vue刷新當前頁面有三種方法：

方法一：this.$router.go(0)

利用history 中前進和後退的功能，傳入 0 刷新當前頁面。但是有一個問題就是頁面整個刷新過程中會白屏，嚴重影響用户的體驗感，效果不好。

this.$router.go(0)

方法二：location.reload()

利用直接使用刷新當前頁面的方法。但是同樣存在有一個問題就是頁面整個刷新過程中會白屏，嚴重影響用户的體驗感，效果也是不好，和方法一的現象一直，也不推薦使用。

location.reload()

方法三：provide / inject組合

允許一個祖先組件向其所有子孫後代注入一個依賴，不論組件層次有多深，並在起上下游關係成立的時間裏始終生效。

provide：選項應該是一個對象或返回一個對象的函數。該對象包含可注入其子孫的屬性。

inject：一個字符串數組，或一個對象，對象的 key 是本地的綁定名。

注意：provide和inject綁定並不是可響應的。這是刻意為之的。如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可響應的。

基本使用步驟如下：

步驟一：（App.vue）

通過 $nextTick()，協助實現。先把 <router-view /> 移除，移除後再重新添加，達到刷新當前頁面的功能。是目前最合適的實現方式。

<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()// 需要刷新頁面