vue刷新當前頁面

vue怎么刷新當前頁面呢？不知道的小伙伴來看看小編今天的分享吧!

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

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

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

this.$router.go(0)

方法二：location.reload()

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

location.reload()

方法三：provide / inject組合

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

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

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

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

基本使用步驟如下：

步驟一：（App.vue）

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

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

以上就是小編今天的分享了，希望可以幫助到大家。

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com