Vue实现当前页面刷新的4种方法举例

更新时间：2023年04月27日 11:54:17 作者：aDiaoYa_

我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能,下面这篇文章主要给大家介绍了关于Vue实现当前页面刷新的4种方法,需要的朋友可以参考下

前言

这两周在写一个后台管理，每次调用接口实现增删改查的过程中，都需要刷新当前页面或者刷新数据。如果手动点击浏览器的小圈圈不仅麻烦、用户体验感极差，而且不会真的有人让用户手动刷新叭。。。这个问题可以称得上是前端的bug了。那么，顺着这个问题，一通搜寻下来，整理了几个刷新当前页面的方法，如下：

方法一：location.reload

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

代码测试：

<template>
  <div class="hello">
    <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>

效果展示：

请添加图片描述

缺点： 想必大家都能看出来了叭，一闪一闪亮晶晶~

方法二：$router.go(0)

这种方法大家应该比较熟悉了，学过vue路由跳转的都知道$router.go()的作用：

> this.$router.go(-1)：后退+刷新；
> this.$router.go(0)：刷新；
> this.$router.go(n) ：前进n个页面

这个方法等同于上面的location.reload，也是利用浏览器的刷新功能，疯狂按F5刷新。。。

代码测试：

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

<script>
export default {
  name: "HelloWorld",
  methods: {
    refresh() {
      this.$router.go(0);
    },
  },
};
</script>

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

效果展示：

请添加图片描述

缺点： 肉眼可见！会出现一瞬间的空白页面，用户体验不好

方法三：provide、inject和$nextTick

首先，我们来认识一下这组选项：

provide 选项应该是：一个对象或返回一个对象的函数。
inject 选项应该是：一个字符串数组，或一个对象，对象的 [key] 是本地的绑定名。

在学习vue父子组件通信的时候，大家应该都知道这是用来干嘛的了：父组件通过provide向子组件传递数据，子组件通过inject获取数据。

那么$nextTick又是干哈的呢？

$nextTick 又说是Vue的另一个生命周期函数：当你修改完数据（数据更新了）之后，Vue帮你操作完DOM之后，把真实的DOM放入页面了（Dom更新渲染），Vue再帮我们调用这个函数（可以监听DOM元素被修改后，在该函数中写你要执行的逻辑）。
接下来，我们来组合一下思路：

我们在父组件中通过给<router-view></router-view>添加v-if来控制子组件销毁和重建的方式，从而控制页面的再次加载。然后在需要当前页面刷新的页面中注入 reload 依赖，直接通过this.reload来调用刷新。

代码测试：

App组件：

<template>
  <div id="app">
    <HelloWorld v-if="isReload" />
  </div>
</template>

<script>
import HelloWorld from "./components/HelloWorld.vue";

export default {
  name: "App",
  data() {
    return {
      isReload: true,
    };
  },
  components: {
    HelloWorld,
  },
  provide() {
    return {
      msg: "未刷新",
      reload: this.reload,
    };
  },
  methods: {
    async reload() {
      this.isReload = false;
      await this.$nextTick();
      this.isReload = true;
    },
  },
};
</script>

子组件：

<template>
  <div class="hello">
    <img src="../imgs/03.jpg" alt="" />
    <p>{{ msg }}</p>
    <button @click="refresh">点击刷新页面</button>
  </div>
</template>

<script>
export default {
  inject: ["reload", "msg"],
  name: "HelloWorld",
  methods: {
    refresh() {
      this.msg = "我刷新啦！";
      this.reload;
    },
  },
};
</script>

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

效果展示：

请添加图片描述

缺点： 可以看到页面不会刷白，但是这种方法也有很多弊端。我们都知道Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。这样容易造成事件循环；并且使用provide和inject也涉及到组件的多层级通信，有些繁琐。

方法四：创建空白页

这个方法…我此前从没用过，就是利用$router.replace路由跳转到一个空白页面，然后在空白页面中立即执行$router.replace切换到原来的页面。$router.replace不会向 history 添加新纪录，当路由跳转得比较快的时候，不会出现一瞬间的空白页。

代码测试：

空白页：

<template>
  <div class="hello"></div>
</template>

<script>
export default {
  name: "HelloTest",
  created() {
    this.$router.replace(this.$route.query.redirect);
  },
};
</script>


<style scoped>
</style>

需要刷新的页面：

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

<script>
export default {
  name: "HelloWorld",
  methods: {
    refresh() {
      this.$router.replace(`/blank?redirect=${this.$route.fullPath}`);
    },
  },
};
</script>

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

路由：

const router = new VueRouter({
  mode: 'history',
  routes: [{
    path: "/",
    component: () => import('../components/HelloWorld.vue'),
    meta: {
      keepAlive: true,
    }
  },
  {
    path: "/blank",
    component: () => import('../components/HelloTest.vue'),
    meta: {
      keepAlive: true,
    }
  }]
})

效果展示：

请添加图片描述

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

总结

以上就是比较常见的当前页面刷新的方法，各有优缺点，根据应用场景使用。

到此这篇关于Vue实现当前页面刷新的4种方法的文章就介绍到这了,更多相关Vue当前页面刷新内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue.js教程之axios与网络传输的学习实践
这篇文章主要给大家介绍了Vue.js之axios与网络传输的相关资料，文中介绍的非常详细，对大家具有一定的参考学习价值，需要的朋友们下面跟随小编一起来学习学习吧。
2017-04-04
使用vue3+ts+setup获取全局变量getCurrentInstance的方法实例
这篇文章主要给大家介绍了关于使用vue3+ts+setup获取全局变量getCurrentInstance的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用vue3具有一定的参考学习价值,需要的朋友可以参考下
2022-08-08
Vue自定义加水波纹效果指令实例代码
这篇文章主要给大家介绍了关于Vue自定义加水波纹效果指令的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
2022-02-02
一文带你上手Vue新的状态管理Pinia
Vuex 作为一个老牌 Vue 状态管理库，大家都很熟悉了，Pinia 是 Vue.js 团队成员专门为 Vue 开发的一个全新的状态管理库，本文就来讲讲它的具体使用吧
2023-04-04
uni-app项目中引入Vant UI组件库完美避坑指南（纯净版）
网上百度uniapp使用vant时,很多答案都是在根路径下创建文件夹,而且都是基于小程序环境的,其实uniapp可以直接使用的,这篇文章主要给大家介绍了关于uni-app项目中引入Vant UI组件库完美避坑指南的相关资料,需要的朋友可以参考下
2024-02-02
使用Vue.js和MJML创建响应式电子邮件
这篇文章主要介绍了使用Vue.js和MJML创建响应式电子邮件，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2021-03-03
Vue手动控制点击事件Click触发方式
这篇文章主要介绍了Vue手动控制点击事件Click触发方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-01-01
Vue.js快速入门实例教程
vue是法语中视图的意思，Vue.js是一个轻巧、高性能、可组件化的MVVM库，同时拥有非常容易上手的API。这篇文章主要介绍了Vue.js快速入门实例教程的相关资料,需要的朋友可以参考下
2016-10-10
Vue中引入echarts的步骤及折线图、柱状图常见配置项
这篇文章主要介绍了Vue中引入echarts的步骤及折线图、柱状图常见配置项,需要的朋友可以参考下
2023-11-11
详解vue2.0脚手架的webpack 配置文件分析
本篇文章主要介绍了详解vue2.0脚手架的webpack 配置文件分析，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-05-05