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 綁定並非可響應的。這是刻意爲之的。若是你傳入了一個可監聽的對象，那麼其對象的屬性仍是可響應的。