vue項(xiàng)目如何刷新當(dāng)前頁(yè)面的方法
1.場(chǎng)景
在處理列表時(shí)，常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當(dāng)前頁(yè)面的需求。
2.遇到的問(wèn)題
1. 用vue-router重新路由到當(dāng)前頁(yè)面，頁(yè)面是不進(jìn)行刷新的
2.采用window.reload()，或者router.go(0)刷新時(shí)，整個(gè)瀏覽器進(jìn)行了重新加載，閃爍，體驗(yàn)不好
3.解決方法
provide / inject組合
作用：允許一個(gè)祖先組件向其所有子孫后代注入一個(gè)依賴，不論組件層次有多深，并在起上下游關(guān)系成立的時(shí)間里始終生效。
App.vue:
聲明reload方法，控制router-view的顯示或隱藏，從而控制頁(yè)面的再次加載
tableList.vue:
在頁(yè)面注入App.vue組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加...）,直接this.reload()調(diào)用，即可刷新當(dāng)前頁(yè)面。
4.provide / inject 用法
provide：選項(xiàng)應(yīng)該是一個(gè)對(duì)象或返回一個(gè)對(duì)象的函數(shù)。該對(duì)象包含可注入其子孫的屬性。
inject：一個(gè)字符串?dāng)?shù)組，或一個(gè)對(duì)象，對(duì)象的 key 是本地的綁定名
提示：provide和inject綁定并不是可響應(yīng)的。這是刻意為之的。如果你傳入了一個(gè)可監(jiān)聽(tīng)的對(duì)象，那么其對(duì)象的屬性還是可響應(yīng)的。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- vue項(xiàng)目刷新當(dāng)前頁(yè)面的三種方法
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的七種方法總結(jié)
- vue.js實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的方法教程
- Vue實(shí)現(xiàn)刷新當(dāng)前頁(yè)面的三種方式總結(jié)
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的4種方法舉例
- vue.js刷新當(dāng)前頁(yè)面的實(shí)例講解
- Vue.js刷新當(dāng)前頁(yè)面的常見(jiàn)方法
- Vue實(shí)現(xiàn)當(dāng)前頁(yè)面刷新的五種方法總結(jié)
相關(guān)文章
為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題
這篇文章主要介紹了為vue-router懶加載時(shí)下載js的過(guò)程中添加loading提示避免無(wú)響應(yīng)問(wèn)題,需要的朋友可以參考下2018-04-04
TypeScript基本類型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2023-10-10
Vue在項(xiàng)目中如何引入本地Json數(shù)據(jù)
這篇文章主要介紹了Vue在項(xiàng)目中如何引入本地Json數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList
本篇文章主要介紹了詳解Vue的computed(計(jì)算屬性)使用實(shí)例之TodoList，具有一定的參考價(jià)值，有興趣的可以了解一下2017-08-08
這篇文章主要介紹了vueCl如何 查看打包后文件的大小占比問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-06-06
解決Vite打包后直接使用瀏覽器打開(kāi),顯示空白問(wèn)題
這篇文章主要介紹了解決Vite打包后直接使用瀏覽器打開(kāi),顯示空白問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要為大家詳細(xì)介紹了vue中使用svg封裝全局消息提示組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁(yè)面和方法中如何通過(guò)遍歷對(duì)象獲取對(duì)象的鍵(key)和值(value)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-05-05
如何將HTML頁(yè)面改寫到vue項(xiàng)目中詳解
html和vue都是前端技術(shù)中非常重要的一部分,其中html是web開(kāi)發(fā)的基石,而vue則是現(xiàn)代化的前端開(kāi)發(fā)框架之一,下面這篇文章主要給大家介紹了關(guān)于如何將HTML頁(yè)面改寫到vue項(xiàng)目中的相關(guān)資料,需要的朋友可以參考下2024-08-08
vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置）
制作一個(gè)折線圖用于顯示當(dāng)前24小時(shí)的數(shù)據(jù)，并且可以通過(guò)拖動(dòng)折現(xiàn)圖設(shè)置數(shù)據(jù)，接下來(lái)通過(guò)本文給大家分享vue+echarts實(shí)現(xiàn)可拖動(dòng)節(jié)點(diǎn)的折線圖（支持拖動(dòng)方向和上下限的設(shè)置），感興趣的朋友跟隨一起學(xué)習(xí)吧2019-04-04