【VUE】在不刷新浏览器的情况下如何重载当前页面组件

    众所周知，刷新页面产生的空白页停留感用户体验非常差。

    典型如下操作：

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();

    

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