1. 程式人生 > 其它 >vue專案三種方式重新整理當前頁面(過載當前頁面資料)

vue專案三種方式重新整理當前頁面(過載當前頁面資料)

一、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()

  


-----------不忘初心------------