广告：宝塔服务器面板，一键全能部署及管理，送你10850元礼包，点我领取~~~

本篇文章给大家带来了关于vue3 的相关知识，其中将给大家聊聊vue3中如何刷新当前页面，感兴趣的朋友下面一起来看一下吧，希望对大家有帮助。

一般我们在删除或者编辑完表格数据的时候，会再次请求接口来刷新表格的数据。如果是同时有好几个接口需要请求，那就不能再每个接口挨个去调了。我们需要使用一种比较友好的方式来实现了。

第一种最直观的就是直接刷新当前页面，比如使location.reload和$router.go(0)方法。但是这种方式会导致页面会有白屏情况，不友好。那么我们能不能刷新当前的vue组件呢？我们知道当vue的组件重新渲染以后它的整个生命周期会重新执行一遍，接口自然而然的也会重新请求一遍的。那么多如何刷新当前组件呢？首先是通过v-if来控制当前页面组件的渲染。在有router-view渲染组件的情况下，我们直接把v-if加在router-view上面。然后通过控制这个判断条件，比如我们就叫做isRouterAlive。

那么这个判断条件如何控制呢？因为涉及到跨组件通信，所以需要使用provide/inject。在router-view组件中通过provide提供一个relaod方法，当删除或者编辑完成表格数据以后，使用inject触发reload方法。在reload方法里面我们来控制判断条件。当realod的时候isRouterAlive=false,紧接着在nextTick中设置为true,这样就可以实现组件重新加载了。

下面我们来看看代码逻辑的实现。

首先修改router-view渲染组件

<template>  <div class="main">    <router-view v-if="isRouterAlive"></router-view>  </div></template><script>export default {    provide(){        return {            reload: this.reload        }    },    data(){        return {            isRouterAlive: true        }    },    methods: {        reload(){            this.isRouterAlive = false            //通过this.$nextTick()产生一个微任务,在一次dom事件循环后,重新创建组件            this.$nextTick(() => {              this.isRouterAlive = true              })        }    }  }</script>

在table页面，这样实现：

<template>  <div>    首页    <button @click="handleSubmit">刷新</button>  </div></template><script>export default {  //通过inject获取祖先元素的reload方法  inject: ['reload'],  data() {    return {      isRouterAlive: true,    }  },  methods: {    handleSubmit() {      // 假如这是一个编辑提交事件      // 这里是编辑请求的各种逻辑和接口...      // 编辑执行成功，就刷新当前页面，请求reload      this.reload()    },  },}</script>

通过这样的方式，不会出现页面空白,地址栏会不会出现快速切换的过程,用户体验很友好。

推荐学习：《vue视频教程》

以上就是聊聊vue3中如何刷新当前页面的详细内容，更多请关注9543建站博客其它相关文章！