vue项目实现页面刷新方式

使用vue做管理后台时，经常遇到新增，删除，修改需要返回主页面。这时页面需要重新刷新才能看到最新的数据。

（1）window.location.reload();

export default { 
  methods: {
     /* 刷新页面 */
    refreshView () {
      window.location.reload();
    },
  }
}

页面采用原生的js刷新方式，刷新等待的效果有点慢，但也可以满足要求。

（2）this.$router.go(0);

export default { 
  methods: {
     /* 刷新页面 */
    refreshView () {
     this.$router.go(0);
    },
  }
}

页面采用vue路由回退功能，页面虽然也能刷新，但等待的效果也有点久。

（3）this.$router.go(window.location.href);

export default { 
  methods: {
     /* 刷新页面 */
    refreshView () {
     this.$router.go(window.location.href); 
    },
  }
}

页面采用vue路由回退当前页面，页面不会空白一瞬间。

（4）provide / inject 组合方式

App.vue页面

index.vue页面

总结：第四种方式最快速达到刷新页面效果，等待时间最短，用户体验较好。