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的顯示或隱藏,從而控制頁面的再次加載,這邊定義了

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


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 近日,濟南大雨夾雪,濕氣和寒氣直逼室內,寢室內因而水淋淋的一片,潮濕不已。在最適合穿著拖鞋滑倒的天氣,室友的確很不...
    阿黎阿黎閱讀 427評論 0 1
  • 文/魚子陌 “明天你是否會想起,昨天你寫的日記,明天你是否還惦記,曾經最愛哭的你”。我想,你大概不記得這首歌了,或...
    魚子陌閱讀 450評論 0 0
  • 素材原圖: 上次畫了多肉虹之玉,這次畫一個多肉吉娃娃。畫完后和素材原圖相比色差還是挺大的,立體感也有些差,部...
    江山手中畫閱讀 1,782評論 1 33
  • ——很多大學生的真實寫照 “高三好苦啊,天天坐在教室里,刷題、背書、聽老師教育。好羨慕大學生啊!放假放的早,...
    brid閱讀 301評論 0 1
  • 中國現在剩男剩女有兩億人,為什么這么多,就是隨著中國改革開放,男女教育平等,大學的擴招,女性得到了解放,可...
    仙人掌倔閱讀 201評論 2 3