vue項目如何刷新當前頁面


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

 

 

 

如果希望點擊確定的時候,Dialog 對話框關閉的時候,當前http://localhost:9530/#/supplier/supplierAll頁面可以重新刷新下

那么表格的數據可以重新加載,Dialog 對話框設置的數據可以在確定后刷新出現在頁面上

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

 

 

但是,試過的會發現用vue-router重新路由到當前頁面,頁面是不進行刷新的,根本沒有任何作用~所以這個方法out!

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

1、最直接整個頁面重新刷新:

這兩種都可以刷新當前頁面的,缺點就是相當於按ctrl+F5 強制刷新那種,整個頁面重新加載,會出現一個瞬間的空白頁面,體驗不好

2、新建一個空白頁面supplierAllBack.vue,點擊確定的時候先跳轉到這個空白頁,然后再立馬跳轉回來

 

 空白頁supplierAllBack.vue里面的內容:

這個方式,相比第一種不會出現一瞬間的空白頁,只是地址欄有個快速的切換的過程,可采用

3、provide / inject 組合 方式是我試過最實用的,下面用項目截圖給大家說明下:首先,要修改下你的app.vue

 

 通過聲明reload方法,控制router-view的顯示或隱藏,從而控制頁面的再次加載,這邊定義了isRouterAlive //true or false 來控制

然后在需要當前頁面刷新的頁面中注入App.vue組件提供(provide)的 reload 依賴,然后直接用this.reload來調用就行

 

 


————————————————

原文鏈接:https://blog.csdn.net/qq_16772725/java/article/details/80467492


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM