vue3中怎么刷新当前页面

这篇“vue3中怎么刷新当前页面”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue3中怎么刷新当前页面”文章吧。

创新互联公司是创新、创意、研发型一体的综合型网站建设公司，自成立以来公司不断探索创新，始终坚持为客户提供满意周到的服务，在本地打下了良好的口碑，在过去的十载时间我们累计服务了上千家以及全国政企客户，如人造雾等企业单位，完善的项目管理流程，严格把控项目进度与质量监控加上过硬的技术实力获得客户的一致赞誉。

1.业务场景

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

2.实现思路

第一种最直观的就是直接刷新当前页面，比如使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,这样就可以实现组件重新加载了。

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

3.代码实现

首先修改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>

以上就是关于“vue3中怎么刷新当前页面”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注创新互联行业资讯频道。

本文题目：vue3中怎么刷新当前页面
文章源于：https://www.cdcxhl.com/article48/igepep.html

成都网站建设公司_创新互联，为您提供网站维护、网站内链、网站排名、微信公众号、网站导航、营销型网站建设

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联