vue項目如何刷新當前頁面的方法
1.場景
在處理列表時,常常有刪除一條數(shù)據(jù)或者新增數(shù)據(jù)之后需要重新刷新當前頁面的需求。
2.遇到的問題
1. 用vue-router重新路由到當前頁面,頁面是不進行刷新的
2.采用window.reload(),或者router.go(0)刷新時,整個瀏覽器進行了重新加載,閃爍,體驗不好
3.解決方法
provide / inject組合
作用:允許一個祖先組件向其所有子孫后代注入一個依賴,不論組件層次有多深,并在起上下游關(guān)系成立的時間里始終生效。
App.vue:
聲明reload方法,控制router-view的顯示或隱藏,從而控制頁面的再次加載

tableList.vue:
在頁面注入App.vue組件提供(provide)的 reload 依賴,在邏輯完成之后(刪除或添加...),直接this.reload()調(diào)用,即可刷新當前頁面。


4.provide / inject 用法
provide:選項應該是一個對象或返回一個對象的函數(shù)。該對象包含可注入其子孫的屬性。
inject:一個字符串數(shù)組,或一個對象,對象的 key 是本地的綁定名
提示:provide和inject綁定并不是可響應的。這是刻意為之的。如果你傳入了一個可監(jiān)聽的對象,那么其對象的屬性還是可響應的。
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題
這篇文章主要介紹了為vue-router懶加載時下載js的過程中添加loading提示避免無響應問題,需要的朋友可以參考下2018-04-04
TypeScript基本類型 typeof 和keyof案例詳解
這篇文章主要介紹了TypeScript基本類型 typeof 和keyof案例詳解,本文給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下2023-10-10
詳解Vue的computed(計算屬性)使用實例之TodoList
本篇文章主要介紹了詳解Vue的computed(計算屬性)使用實例之TodoList,具有一定的參考價值,有興趣的可以了解一下2017-08-08
vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)
這篇文章主要介紹了vue在頁面和方法中如何通過遍歷對象獲取對象的鍵(key)和值(value)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-05-05
vue+echarts實現(xiàn)可拖動節(jié)點的折線圖(支持拖動方向和上下限的設(shè)置)
制作一個折線圖用于顯示當前24小時的數(shù)據(jù),并且可以通過拖動折現(xiàn)圖設(shè)置數(shù)據(jù),接下來通過本文給大家分享vue+echarts實現(xiàn)可拖動節(jié)點的折線圖(支持拖動方向和上下限的設(shè)置),感興趣的朋友跟隨一起學習吧2019-04-04

