vue刷新當(dāng)前頁(yè)面

vue怎么刷新當(dāng)前頁(yè)面呢？不知道的小伙伴來(lái)看看小編今天的分享吧!

vue刷新當(dāng)前頁(yè)面有三種方法：

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

利用history 中前進(jìn)和后退的功能，傳入 0 刷新當(dāng)前頁(yè)面。但是有一個(gè)問(wèn)題就是頁(yè)面整個(gè)刷新過(guò)程中會(huì)白屏，嚴(yán)重影響用戶的體驗(yàn)感，效果不好。

this.$router.go(0)

方法二：location.reload()

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

location.reload()

方法三：provide / inject組合

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

provide：選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。

inject：一個(gè)字符串?dāng)?shù)組，或一個(gè)對(duì)象，對(duì)象的 key 是本地的綁定名。

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

基本使用步驟如下：

步驟一：（App.vue）

通過(guò) $nextTick()，協(xié)助實(shí)現(xiàn)。先把 <router-view /> 移除，移除后再重新添加，達(dá)到刷新當(dāng)前頁(yè)面的功能。是目前最合適的實(shí)現(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()調(diào)用，即可刷新當(dāng)前頁(yè)面。

this.reload()// 需要刷新頁(yè)面

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

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