怎樣使vue項目刷新頁面

這次帶給大家怎樣使vue專案刷新頁面，使vue專案刷新頁面的注意事項有哪些，以下就是實戰案例，一起來看一下。

1.場景

在處理清單時，常常有刪除一條資料或新增資料之後需要重新刷新目前頁面的需求。

2.遇到的問題

1. 用vue-router重新路由到目前頁面，頁面是不進行刷新的

2.採用window.reload()，或者router.go(0)刷新時，整個瀏覽器進行了重新加載，閃爍，體驗不好

3.解決方法

provide / inject組合

作用：允許一個祖先元件向其所有子孫後代注入一個依賴，無論組件層次有多深，並在起上下游關係成立的時間裡始終生效。

App.vue:

宣告reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次載入

## tableList.vue:

在頁面注入App.vue元件提供（provide）的reload 依賴，在邏輯完成之後（刪除或新增...）,直接this.reload()調用，即可刷新當前頁面。

4.provide / inject 用法

provide：選項應該是一個物件或傳回一個物件的函數。該物件包含可注入其子孫的

屬性。

inject：一個

字串數組，或一個對象，對象的key 是本地的綁定名

#提示：

provide和inject綁定並不是可回應的。這是刻意為之的。如果你傳入了一個可監聽的對象，那麼其對象的屬性還是可回應的。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

如何使用v-model與promise兩種方式實作vue彈窗元件

如何使用Vue二次封裝axios外掛程式
#

以上是怎樣使vue項目刷新頁面的詳細內容。更多資訊請關注PHP中文網其他相關文章！