vue項目刷新當前頁面的三種方法

這篇文章主要介紹了vue項目刷新當前頁面的三種方法,本文圖文並茂給大家介紹的非常不錯,具有一定的參考借鑑價值,需要的朋友可以參考下

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

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

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

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

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

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

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

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

這兩種都可以刷新當前頁面的,缺點就是相當於按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來調用就行

總結

以上所述是小編給大家介紹的vue項目刷新當前頁面的三種方法,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對神馬文庫網站的支持!

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章