首頁 > web前端 > js教程 > 主體

怎樣使vue項目刷新頁面

php中世界最好的语言
發布: 2018-05-28 15:32:28
原創
2948 人瀏覽過

這次帶給大家怎樣使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 是本地的綁定名

#提示:

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

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

推薦閱讀:

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

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

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

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!