有時會有需求再操作某些功能後,再度導向同個頁面,這時就會爆出錯誤。
或切換同個元件的頁面、重新整理來獲取新資料、重新跑生命週期的行為,window.reload(),
或者this.$router.go(0)但畫面會有閃爍,體驗上不是那麼好。
我們就可以利用抽換router-view 的方式來達到元件更新,isRouterAlive為false時此router-view就會被拔除,當isRouterAlive又為true時,就會再度顯示,但此時會重新載入元件,所以該元件的生命週期就會重新啟動。
首先我們就可以先再router-view的地方加上一個 v-if=”isRouterAlive”
接著在script的地方(通常會是App.vue)補上一個provide、isRouterAlive的data、reload的methods。
provide:父元件都可以作為其所有子元件的依赖提供者。這個特性有兩個部分:父元件有一個 provide
來提供資料,子元件有一個 inject
來開始使用這些資料(也就是提供給其他子元件資料使用)。
isRouterAlive:控制router-view是否顯示。
reload:此方法為切換isRouterAlive 狀態(先切換到false在切回true)。
在其他頁面(元件)的script加上inject,就可以取用父元件的reload方法(用this.reload()),來達到刷新頁面。
參考連結