Vue 重新加載頁面（不刷新）

Vue 不刷新的情況下重新加載頁面

使用場景：

​ 當我們在項目中，會遇到一些要修改數據庫的數據后並重載頁面，顯示修改后最新的數據情況。

---

我遇到的情況：

我的Vue項目中使用了element-ui中的導航欄組件。我想要重載頁面后，路由還是指向當前導航欄所選中的哪一項。在要刷新重載頁面時，我用了：

//繳費完成后頁面刷新，重新加載繳費情況
location.reload()

看似沒啥問題，但是當他刷新后，導航欄的選中又回到了default-active項，且路由也跟着變回了default所指的那個頁面。這就沒有達到我要的效果。

於是我就上網查找適合的方法。找到一個方法完美的解決了我的問題。

用provide / inject 組合

原理：允許一個祖先組件向其所有子孫后代注入一個依賴，不論組件層次有多深，並在起上下游關系成立的時間里始終生效

這種情況下，就要在Main_student.vue中聲明reload方法，控制router-view的顯示或隱藏，從而控制頁面的再次加載。

<template>
<div>
  <!--指定組件的呈現位置-->
  <router-view v-if="isRouterAlive"></router-view>
</div>
</template>

<script>
export default {
  name: "Main_student",
  provide () {
    return {
      reload: this.reload
    }
  },
  data () {
    return {
      isRouterAlive: true
    }
  },
  methods: {
    reload() {
      this.isRouterAlive = false
      this.$nextTick(function () {
        this.isRouterAlive = true
      })
    }
  },
}
</script>

在需要用到刷新（頁面重載）的頁面。在頁面注入祖先組件提供（provide）的 reload 依賴，在邏輯完成之后（刪除或添加…）,直接this.reload()調用，即可刷新當前頁面。

注入reload方法

export default {
  inject: ['reload'],

   methods：{
      update（）{
        	// 在需要用到的事件中調用this.reload()；函數即可
            this.reload()    
        }      
    } 
 }

參考博文：https://www.cnblogs.com/leng12/p/xiaoleng.html