vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
想必大家在刨坑vue的時(shí)候也遇到過(guò)下面情形：比如在刪除或者增加一條記錄的時(shí)候希望當(dāng)前頁(yè)面可以重新刷新或者如下面這種：
如果希望點(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í)候我們最直接的思維就是想到下面這種：
但是，試過(guò)的會(huì)發(fā)現(xiàn)用vue-router重新路由到當(dāng)前頁(yè)面，頁(yè)面是不進(jìn)行刷新的，根本沒(méi)有任何作用~所以這個(gè)方法out！
下面我這邊整理幾種可圈可點(diǎn)的三種方式，大家可以自行的選擇：
1、最直接整個(gè)頁(yè)面重新刷新：
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)
空白頁(yè)supplierAllBack.vue里面的內(nèi)容：
這個(gè)方式，相比第一種不會(huì)出現(xiàn)一瞬間的空白頁(yè)，只是地址欄有個(gè)快速的切換的過(guò)程，可采用
3、provide / inject 組合 方式是我試過(guò)最實(shí)用的，下面用項(xiàng)目截圖給大家說(shuō)明下：首先，要修改下你的app.vue
通過(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)用就行
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的七種方法總結(jié)
- vue項(xiàng)目如何刷新當(dāng)前頁(yè)面的方法
- vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程
- Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
- vue.js刷新當(dāng)前頁(yè)面的實(shí)例講解
- Vue.js刷新當(dāng)前頁(yè)面的常見(jiàn)方法
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的五種方法總結(jié)
相關(guān)文章
vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)（路由守衛(wèi)）
vue-route 提供的 beforeRouteUpdate 可以方便地實(shí)現(xiàn)導(dǎo)航守衛(wèi)（navigation-guards）。這篇文章主要介紹了vue2.0 實(shí)現(xiàn)導(dǎo)航守衛(wèi)（路由守衛(wèi)）的相關(guān)知識(shí),需要的朋友可以參考下2018-05-05
vue-better-scroll 的使用實(shí)例代碼詳解
這篇文章主要介紹了vue-better-scroll 的使用實(shí)例代碼詳解，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-12-12
基于vue.js組件實(shí)現(xiàn)分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了基于vue.js組件實(shí)現(xiàn)分頁(yè)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue+animation實(shí)現(xiàn)翻頁(yè)動(dòng)畫(huà)
這篇文章主要為大家詳細(xì)介紹了vue+animation實(shí)現(xiàn)翻頁(yè)動(dòng)畫(huà)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
這篇文章主要為大家介紹了vue3的二維碼組件vue3-next-qrcode示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
vue組件傳值(高級(jí))、屬性傳值、反向傳值、跨級(jí)傳值實(shí)例詳解
父組件通過(guò)屬性傳值給子組件，父組件修改數(shù)據(jù)后會(huì)刷新頁(yè)面并重新傳值給子組件，子組件可以修改父組件傳的值并刷新自己的頁(yè)面?但是并不會(huì)修改父組件中的值，這篇文章主要介紹了vue組件傳值（高級(jí)）、屬性傳值、反向傳值、跨級(jí)傳值,需要的朋友可以參考下2022-09-09
這篇文章主要為大家詳細(xì)介紹了Vue中引用echarts的超詳細(xì)教程,文中的示例代碼簡(jiǎn)潔易懂,對(duì)我們熟練使用vue有一定的幫助,需要的小伙伴可以參考一下2023-09-09
element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開(kāi)功能
這篇文章主要給大家介紹了關(guān)于element ui table（表格）實(shí)現(xiàn)點(diǎn)擊一行展開(kāi)功能的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2018-12-12
Vue+ElementUI啟動(dòng)vue卡死的問(wèn)題及解決
這篇文章主要介紹了Vue+ElementUI啟動(dòng)vue卡死的問(wèn)題及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
vue2封裝webSocket的實(shí)現(xiàn)(開(kāi)箱即用)
在Vue2中,可以使用WebSocket實(shí)時(shí)通信,本文主要介紹了vue2封裝webSocket的實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-08-08