Let's talk about how to refresh the current page in vue3

#1. Business scenario

Generally when we delete or edit the table data, we will request the interface again to refresh the table data. If there are several interfaces that need to be requested at the same time, then you cannot adjust each interface one by one. We need to use a more friendly way to achieve it.

2. Implementation ideas

The first and most intuitive way is to directly refresh the current page, such as using the location.reload and $router.go(0) methods. However, this method will cause the page to have a white screen, which is not friendly. So can we refresh the current vue component? We know that when a Vue component is re-rendered, its entire life cycle will be executed again, and the interface will naturally be requested again. So how to refresh the current component? The first is to control the rendering of the current page component through v-if. In the case of router-view rendering component, we directly add v-if to router-view. Then by controlling this judgment condition, for example, we call it isRouterAlive.

So how to control this judgment condition? Because cross-component communication is involved, provide/inject needs to be used. Provide a relaod method through provide in the router-view component. After deleting or editing the table data, use inject to trigger the reload method. In the reload method we control the judgment conditions. When realod isRouterAlive=false, then set it to true in nextTick, so that the component can be reloaded.

Let’s take a look at the implementation of the code logic.

3. Code implementation

First modify router-viewrendering component

<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>

In the table page, implement it like this:

<template>
  <div>
    首页
    <button @click="handleSubmit">刷新</button>
  </div>
</template>

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

In this way, the page will not be blank, the address bar will not quickly switch, and the user experience will be very friendly.

Recommended learning: "vue video tutorial"