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