vue 刷新頁面的幾種方法

1、最直接整個頁面重新刷新：

 

location. reload()

this.$router.go(0)

 

這兩種都可以刷新當前頁面的，缺點就是相當於按ctrl+F5 強制刷新那種，整個頁面重新加載，會出現一個瞬間的空白頁面，體驗不好

 

2、新建一個空白頁面supplierAllBack.vue，點擊確定的時候先router.push()跳轉到這個空白頁，然后在空白頁再router.push()跳回去

這個方式，相比第一種不會出現一瞬間的空白頁，只是地址欄有個快速的切換的過程，可采用

 

3、provide / inject 組合 方式是我試過最實用的，下面用項目截圖給大家說明下：首先，要修改下你的app.vue

通過聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載，這邊定義了

isRouterAlive //true or false 來控制

然后在需要當前頁面刷新的頁面中注入App.vue組件提供（provide）的 reload 依賴，然后直接用this.reload來調用就行

 

app.vue

<router-view v-if="isRouterAlive"></router-view>

import {provide} from "vue";

function reload () {
  globeData.isRouterAlive = false;
  nextTick(function () {
    globeData.isRouterAlive = true;
  })
}
provide('reload', reload);

使用的地方

import {inject} from "vue";

let iload = inject('reload');

 iload();