總結VUE幾種頁面重新整理方法

有時候在頁面裡做了某些操作以後，需要頁面重新整理一下來重新獲取資料。試了幾種方法，以下總結：

1、this.$router.go(0)

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

2、location.reload()

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

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

在需要頁面重新整理的地方寫上：this.$router.push('/emptypage')，跳轉到乙個空白頁。在emptypage.vue裡beforerouteenter 鉤子裡控制頁面跳轉，從而達到重新整理的效果

beforerouteenter (to, from, next) )

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

4、控制的顯示隱藏

預設isrouteralive肯定是true，在需要重新整理的時候把這個值設為false，接著再重新設為true：

this.isrouteralive = false

this.$nexttick(function () )

這種方法從畫面上是看不出破綻的。也可以搭配provide、inject使用。例如：

然後在需要重新整理的頁面引入依賴：inject: ['reload'],

在需要執行的地方直接呼叫方法即可：this.reload()。

後來發現，我的需求不通過重新整理頁面也可以解決，就是利用vue元件通訊，監聽事件發生，然後重新調一下獲取資料的介面就行。

也就是說：

1、給vue的原型上新增乙個bus屬性

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

2、home頁面進行修改個人資料操作時觸發事件，

home.vue： changeprofile （）

mounted () )

},對於我的需求來說，頁面重新整理的第四種方法和利用元件通訊都能解決我的問題，前者更簡單後者更專業，也更強大。

總結VUE幾種頁面重新整理方法

有時候在頁面裡做了某些操作以後，需要頁面重新整理一下來重新獲取資料。試了幾種方法，以下總結 1 this.router.go 0 這種方法頁面會一瞬間的白屏，體驗不是很好，雖然只是一行 的事 2 location.reload 這種也是一樣，畫面一閃，效果總不是很好 3 跳轉空白頁再跳回原頁面 在需...

總結VUE幾種頁面重新整理方法

總結vue幾種頁面重新整理方法 vue router巢狀路由，預設子路由設定 原生js實現乙個無縫輪播圖外掛程式 支援vue vue2.0做移動端開發用到的相關外掛程式和經驗總結 2 vue外掛程式開發練習 實用彈窗 writing a very plugin in vue.js example v...

vue頁面重新整理方法

有時候在頁面裡做了某些操作以後，需要頁面重新整理一下來重新獲取資料。試了幾種方法，以下總結 1 this.router.go 0 這種方法頁面會一瞬間的白屏，體驗不是很好，雖然只是一行 的事 2 location.reload 這種也是一樣，畫面一閃，效果總不是很好 3 跳轉空白頁再跳回原頁面 在需...