2019-05-29 vue 如何刷新當(dāng)前頁(yè)面

想必大家在刨坑vue的時(shí)候也遇到過(guò)下面情形:比如在刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁(yè)面可以重新刷新或者如下面這種:

image.png

如果希望點(diǎn)擊確定的時(shí)候,Dialog 對(duì)話框關(guān)閉的時(shí)候,當(dāng)前http://localhost:9530/#/supplier/supplierAll頁(yè)面可以重新刷新下

那么表格的數(shù)據(jù)可以重新加載,Dialog 對(duì)話框設(shè)置的數(shù)據(jù)可以在確定后刷新出現(xiàn)在頁(yè)面上

這時(shí)候我們最直接的思維就是想到下面這種:

image.png

但是,試過(guò)的會(huì)發(fā)現(xiàn)用vue-router重新路由到當(dāng)前頁(yè)面,頁(yè)面是不進(jìn)行刷新的,根本沒(méi)有任何作用~所以這個(gè)方法out!

下面我這邊整理幾種可圈可點(diǎn)的三種方式,大家可以自行的選擇:

1、最直接整個(gè)頁(yè)面重新刷新:

image.png
location. reload()
this.$router.go(0)

這兩種都可以刷新當(dāng)前頁(yè)面的,缺點(diǎn)就是相當(dāng)于按ctrl+F5 強(qiáng)制刷新那種,整個(gè)頁(yè)面重新加載,會(huì)出現(xiàn)一個(gè)瞬間的空白頁(yè)面,體驗(yàn)不好

2、新建一個(gè)空白頁(yè)面supplierAllBack.vue,點(diǎn)擊確定的時(shí)候先跳轉(zhuǎn)到這個(gè)空白頁(yè),然后再立馬跳轉(zhuǎn)回來(lái)

image.png

空白頁(yè)supplierAllBack.vue里面的內(nèi)容:


image.png

這個(gè)方式,相比第一種不會(huì)出現(xiàn)一瞬間的空白頁(yè),只是地址欄有個(gè)快速的切換的過(guò)程,可采用

3、provide / inject 組合 方式是我試過(guò)最實(shí)用的,下面用項(xiàng)目截圖給大家說(shuō)明下:首先,要修改下你的app.vue
參考資料:https://blog.csdn.net/lfcss/article/details/88786332

image.png

通過(guò)聲明reload方法,控制router-view的顯示或隱藏,從而控制頁(yè)面的再次加載,這邊定義了

isRouterAlive //true or false 來(lái)控制

然后在需要當(dāng)前頁(yè)面刷新的頁(yè)面中注入App.vue組件提供(provide)的 reload 依賴,然后直接用this.reload來(lái)調(diào)用就行


image.png

4、直接初始化vue的數(shù)據(jù)

 Object.assign(this.$data, this.$options.data())
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • 1.場(chǎng)景 在處理列表時(shí),常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁(yè)面的需求。 2.遇到的問(wèn)題 1. 用v...
    華華00526閱讀 3,706評(píng)論 1 16
  • vue概述 在官方文檔中,有一句話對(duì)Vue的定位說(shuō)的很明確:Vue.js 的核心是一個(gè)允許采用簡(jiǎn)潔的模板語(yǔ)法來(lái)聲明...
    li4065閱讀 7,627評(píng)論 0 25
  • 一:什么是閉包?閉包的用處? (1)閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。在本質(zhì)上,閉包就 是將函數(shù)內(nèi)部和函數(shù)外...
    xuguibin閱讀 10,067評(píng)論 1 52
  • 10表示間隔10秒刷新一次 window.location.reload(true); 如果是你要刷新某一個(gè)ifr...
    自由加咖啡閱讀 5,676評(píng)論 0 2
  • 突然之間不知道想要寫些什么,想要做些什么。 腦海里構(gòu)思了一系列的想要提升寫作的寫作方向,但是到頭來(lái)感覺(jué)無(wú)論如何都下...
    小語(yǔ)兒的故事書店閱讀 271評(píng)論 0 1

友情鏈接更多精彩內(nèi)容