vue專案三種方式重新整理當前頁面(過載當前頁面資料)
阿新 • • 發佈:2021-11-05
一、this.$router.go(0)
相當於F5重新整理,這種方法雖然程式碼很少,只有一行,但是體驗很差。頁面會一瞬間的白屏,體驗不是很好
二、location.reload()
這種也是一樣,畫面一閃,體驗不是很好,相當於頁面重新整理
推薦解決方法:
三、用provide / inject 組合
原理:允許一個祖先元件向其所有子孫後代注入一個依賴,不論元件層次有多深,並在起上下游關係成立的時間裡始終生效
在App.vue,宣告reload方法,控制router-view的顯示或隱藏,從而控制頁面的再次載入。
<template> <div id="app"> <router-view v-if="isRouterAlive"></router-view> </div> </template> <script> export default { name: 'App', provide () { return { reload: this.reload } }, data () { return { isRouterAlive: true } }, methods: { reload () { this.isRouterAlive = false this.$nextTick(function () { this.isRouterAlive = true }) } } } </script>
在需要用到重新整理的頁面。在頁面注入App.vue元件提供(provide)的 reload 依賴,在邏輯完成之後(刪除或新增…),直接this.reload()呼叫,即可重新整理當前頁面。
注入reload方法
export default { inject: ['reload'], }
在需要過載的地方直接呼叫
this.reload()