vue項(xiàng)目刷新當(dāng)前頁面的三種方法
想必大家在刨坑vue的時候也遇到過下面情形：比如在刪除或者增加一條記錄的時候希望當(dāng)前頁面可以重新刷新或者如下面這種：
如果希望點(diǎn)擊確定的時候，Dialog 對話框關(guān)閉的時候，當(dāng)前http://localhost:9530/#/supplier/supplierAll頁面可以重新刷新下
那么表格的數(shù)據(jù)可以重新加載，Dialog 對話框設(shè)置的數(shù)據(jù)可以在確定后刷新出現(xiàn)在頁面上
這時候我們最直接的思維就是想到下面這種：
但是，試過的會發(fā)現(xiàn)用vue-router重新路由到當(dāng)前頁面，頁面是不進(jìn)行刷新的，根本沒有任何作用~所以這個方法out！
下面我這邊整理幾種可圈可點(diǎn)的三種方式，大家可以自行的選擇：
1、最直接整個頁面重新刷新：
location. reload()
this.$router.go(0)
這兩種都可以刷新當(dāng)前頁面的，缺點(diǎn)就是相當(dāng)于按ctrl+F5 強(qiáng)制刷新那種，整個頁面重新加載，會出現(xiàn)一個瞬間的空白頁面，體驗(yàn)不好
2、新建一個空白頁面supplierAllBack.vue，點(diǎn)擊確定的時候先跳轉(zhuǎn)到這個空白頁，然后再立馬跳轉(zhuǎn)回來
空白頁supplierAllBack.vue里面的內(nèi)容：
這個方式，相比第一種不會出現(xiàn)一瞬間的空白頁，只是地址欄有個快速的切換的過程，可采用
3、provide / inject 組合 方式是我試過最實(shí)用的，下面用項(xiàng)目截圖給大家說明下：首先，要修改下你的app.vue
通過聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載，這邊定義了
isRouterAlive //true or false 來控制
然后在需要當(dāng)前頁面刷新的頁面中注入App.vue組件提供（provide）的 reload 依賴，然后直接用this.reload來調(diào)用就行
總結(jié)
以上所述是小編給大家介紹的vue項(xiàng)目刷新當(dāng)前頁面的三種方法，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
vue如何實(shí)現(xiàn)左右滑動tab(vue-touch)
這篇文章主要介紹了vue如何實(shí)現(xiàn)左右滑動tab(vue-touch)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-07-07
Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法
這篇文章主要介紹了Vue項(xiàng)目中使用jsonp抓取跨域數(shù)據(jù)的方法，本文通過實(shí)例代碼講解的非常詳細(xì),需要的朋友可以參考下2019-11-11
這篇文章主要介紹了Vuex入門學(xué)習(xí)之Getter詳解,Vuex 允許我們在 store 中定義 getter(可以認(rèn)為是 store 的計(jì)算屬性),就像計(jì)算屬性一樣,getter 的返回值會根據(jù)它的依賴被緩存起來,且只有當(dāng)它的依賴值發(fā)生了改變才會被重新計(jì)算,需要的朋友可以參考下2023-11-11
vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決
這篇文章主要為大家介紹了vue-cli3項(xiàng)目生產(chǎn)和測試環(huán)境分包后文件名和數(shù)量不一致解決方法，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
這篇文章主要介紹了用vscode開發(fā)vue應(yīng)用的方法步驟，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
這篇文章主要介紹了Vue路由vue-router詳細(xì)講解指南，對vue-router感興趣的同學(xué)，可以參考下2021-04-04
Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn)
一個好的項(xiàng)目開始搭建總是需要配置許多初始化配置,本文就來介紹一下Vue+Vite項(xiàng)目初建(axios+Unocss+iconify)的實(shí)現(xiàn),具有一定的參考價值,感興趣的可以了解一下2024-02-02
這篇文章主要介紹了vue的傳參方式和router使用技巧,本文給大家列舉了好幾種傳參方式，需要的朋友可以參考下2018-05-05
vue+highCharts實(shí)現(xiàn)可選范圍的圖表
這篇文章主要為大家詳細(xì)介紹了vue+highCharts實(shí)現(xiàn)可選范圍的圖表，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的全過程
vite2已經(jīng)出來一段時間了,最近沒忍住嘗試了一下,這篇文章主要給大家介紹了關(guān)于利用Vite2和Vue3實(shí)現(xiàn)網(wǎng)站國際化的相關(guān)資料,需要的朋友可以參考下2021-08-08