URL不變的狀況下，最實用的vue刷新當前頁面，provide / inject 組合 方式實現vue頁面刷新

原文：https://blog.csdn.net/Dream_xun/article/details/83024487

其餘參考：https://blog.csdn.net/liyunkun888/article/details/89022149   因爲 router-view 是複用的，單純的改變 id 的值並不會刷新 router-view

這是一種最實用的vue刷新當前頁面，其餘方式通常會出現一個瞬間的空白頁面，體驗很差，至關於按ctrl+F5 強制刷新那種
方式：provide / inject 組合 方式實現vue頁面刷新

1.修改App.vue代碼以下圖所示

 

經過聲明reload方法，控制isRouterAlice屬性true or false 來控制router-view的顯示或隱藏，從而控制頁面的再次加載

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

 

App.vue代碼以下：

<template>
  <div id="app">
    <router-view v-if="isRouterAlive"/>
  </div>
</template>

<script>
import { truncate } from 'fs';
export default {
  name: 'App',
  provide() {
    return {
      reload: this.reload
    }
  },
  data() {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(() => {
        this.isRouterAlive = true
      })
    }
  }
}
</script>