在不刷新瀏覽器的情況下如何重載當前頁面組件

    衆所周知，刷新頁面產生的空白頁停留感用戶體驗非常差。

    典型如下操作：

this.$router.go(0);

    因爲VUE無法在當前頁面組件下執行如下操作：

this.$router.push("當前頁面的PATH");

    這導致我們有時候在某個頁面修改了某些數據，想要在當前頁面看到更改後的效果比較困難。

 

    如何優雅的重載一個頁面組件而不刷新瀏覽器頁面呢？這裏介紹一種思路，雖然看似愚蠢，但是實踐表明，感覺很棒。

    思路：在當前頁面組件中，執行完畢某種更改數據操作之後，先把當前頁面組件的路由PATH存起來，然後跳轉到一個空白頁面組件，在空白頁面組件CREATED的過程中，再次讓路由跳回之前的組件。

    1、在當前組件中建立一個函數refresh，將當前頁面路由PATH寫進全局變量

methods:{
  refresh(){
    this.global.routePath=this.$route.path;
    this.$router.push('/refresh').catch(err=>{err});
  },

    2、refresh頁面組件的created

created(){
  this.$router.push(this.global.routePath);
}

    3、當前組件執行刷新

this.refresh();

    

    此方法雖然看上去很古板，但是效果很不錯。