Vue实现当前页面刷新的方法

1. location.reload
2. 方法二：$router.go(0)
3. 方法三：provide、inject 和$nextTick
4. 方法四：创建空白页
5. 结语

好久没写博客了，因为最近忙着换工作，一直面试。这不是刚入职，我接手一个后台管理系统，发现每次调用接口实现增删改查的过程中，都需要刷新当前页面或者刷新数据。如果手动点击浏览器的小圈圈不仅麻烦、用户体验感极差，而且不会真的有人让用户手动刷新叭。。。这个问题可以称得上是前端的 bug 了。所以特此整理几个刷新当前页面的方法。

location.reload

学习 JS 的过程中，大家应该都了解过Browser 对象，其中Location 对象是 window 对象的一部分。Location 对象中有一个方法，也就是reload()方法，用于刷新当前文档，类似于浏览器上的刷新页面按钮。

代码测试：

<template>
  <div >
    <img src="../imgs/01.jpg" alt="" />
    <button @click="refresh">点击刷新页面</button>
  </div>
</template>

<script>
export default {
  name: "HelloWorld",
  methods: {
    refresh() {
      location.reload();
    },
  },
};
</script>

<style scoped>
.hello img {
  width: 800px;
  display: block;
  margin-bottom: 20px;
}
</style>

效果展示：

缺点： 大家应该可以看到地址栏的变化。。。

结语

以上就是比较常见的 Vue 实现当前页面刷新的方法，各有优缺点，大家可以根据应用场景选择使用。如有错误欢迎你指正。