vue3 admin 开发中的奇淫巧技|在vue中如何刷新当前页面

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>

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

原文链接:https://juejin.cn/post/7216130963276644407 作者:白哥学前端

(0)
上一篇 2023年3月29日 下午5:04
下一篇 2023年3月30日 上午10:05

相关推荐

发表评论

登录后才能评论