有時(shí)候在頁面里做了某些操作以后，需要頁面刷新一下來重新獲取數(shù)據(jù)。試了幾種方法，以下總結(jié)：

1、this.$router.go(0)

這種方法頁面會(huì)一瞬間的白屏，體驗(yàn)不是很好，雖然只是一行代碼的事

2、location.reload()

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

3、跳轉(zhuǎn)空白頁再跳回原頁面

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

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

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

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

默認(rèn)<router-view v-if="isRouterAlive" />isRouterAlive肯定是true，在需要刷新的時(shí)候把這個(gè)值設(shè)為false，接著再重新設(shè)為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'],

在需要執(zhí)行的地方直接調(diào)用方法即可：this.reload()。

我的業(yè)務(wù)需求是在home里，頁面右上角，在我的里面點(diǎn)擊修改個(gè)人資料成功后，頁面1就要刷新一下，如果是在app里面搭配provide、inject這樣用的話，會(huì)出現(xiàn)一個(gè)問題，就是所有的彈窗以及menu部分就都不見了。還沒有找到為什么，，

后來發(fā)現(xiàn)，我的需求不通過刷新頁面也可以解決，就是利用VUE組件通信，監(jiān)聽事件發(fā)生，然后重新調(diào)一下獲取數(shù)據(jù)的接口就行。

也就是說：

1、給Vue的原型上添加一個(gè)bus屬性

main.js：Vue.prototype.$bus = new Vue()

2、home頁面進(jìn)行修改個(gè)人資料操作時(shí)觸發(fā)事件，

home.vue： changeProfile （） {this.$bus.$emit('change')}

3、頁面1里監(jiān)聽如果執(zhí)行了操作，就調(diào)取頁面1需要重新加載的數(shù)據(jù)接口。
?

mounted () {this.$bus.$on('change', ()=> {this.doSomething()}) },

對(duì)于我的需求來說，頁面刷新的第四種方法和利用組件通信都能解決我的問題，前者更簡單后者更專業(yè)，也更強(qiáng)大。

總結(jié)

以上是生活随笔為你收集整理的工作160:总结VUE几种页面刷新方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。