本文例項講述了vue實現路由不變的情況下，重新整理頁面操作。分享給大家供大家參考，具體如下：

背景1：在vue寫的後臺管理專案中，經常會有增、刪、改、查的操作，這些操作只是跟用介面跟後臺互動下

既然用介面互動，那肯定就是axios的非同步請求，那麼就是說後臺資料發生了改變，但是前臺的資料並沒有實時的更新（每次操作完後臺把列表資料重新返給你例外，但是這樣的話每次互動的資料量就偏大了）

背景2：在使用動態路由配置 /detail/:id 這樣的情況下，由於 router-view 是複用的，單純的改變 id 的值並不會重新整理 router-view

所以就要想一個辦法，讓後臺執行完操作後，給前臺返一個操作結果，然後前臺手動重新整理頁面

一開始我想到的是用 window.location.reload() 或者 this.$router.go(0) 這兩個方法，但是後來發現這兩個方法會有短暫的白屏時間，使用者體驗並不太好，所以就放棄了，看了下別人的做法，整理下面兩種方法：

一、用中轉站的方式

這種方式意思就是讓每次操作完成以後，都讓路由跳轉到這個中轉站頁面，然後這個頁面獲取到進來路由的路徑再返回去就可以了，這種方式可以作為解決方法之一，普遍用的還是第二種。

二、provide / inject 的方式

這種方式，就是讓通過 provide 讓App.vue 為所有子孫頁面注入一個 reload 的方法，然後在需要使用的頁面，通過 inject 注入即可，程式碼如下：

App.vue

<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>

子頁面

export default {
  name: 'children',inject: ['reload'],data(){
    return {}
  }
  methods: {
    delData(){
      //在axios成功的回撥裡面
      this.reload();
    }
  }
}

希望本文所述對大家vue.js程式設計有所幫助。