vue3에서 현재 페이지를 새로 고치는 방법에 대해 이야기해 보겠습니다.

이 기사는 vue3에 대한 관련 지식을 제공합니다. 또한 vue3에서 현재 페이지를 새로 고치는 방법에 대해서도 설명합니다. 관심 있는 친구는 아래를 살펴보는 것이 모든 사람에게 도움이 되기를 바랍니다.

1. 비즈니스 시나리오

일반적으로 테이블 데이터를 삭제하거나 편집할 때 테이블 데이터를 새로 고치기 위해 인터페이스를 다시 요청합니다. 동시에 요청해야 하는 인터페이스가 여러 개인 경우 각 인터페이스를 하나씩 조정할 수 없습니다. 이를 달성하려면 좀 더 친근한 방법을 사용해야 합니다.

2. 구현 아이디어

첫 번째이자 가장 직관적인 방법은 location.reload 및 $router.go(0) 메서드를 사용하는 것과 같이 현재 페이지를 직접 새로 고치는 것입니다. 그러나 이 방법을 사용하면 페이지에 흰색 화면이 표시되어 친숙하지 않습니다. 그러면 현재 vue 구성 요소를 새로 고칠 수 있나요? Vue 구성 요소가 다시 렌더링되면 전체 수명 주기가 다시 실행되고 인터페이스가 자연스럽게 다시 요청된다는 것을 알고 있습니다. 그렇다면 현재 구성 요소를 새로 고치는 방법은 무엇입니까? 첫 번째는 v-if를 통해 현재 페이지 구성 요소의 렌더링을 제어하는 ​​것입니다. router-view 렌더링 컴포넌트의 경우 router-view에 v-if를 직접 추가합니다. 그런 다음 이 판단 조건을 제어하여 예를 들어 isRouterAlive라고 부릅니다. 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

그렇다면 이 판단 조건을 어떻게 제어할 수 있을까요? 컴포넌트 간 통신이 포함되므로 provide/inject를 사용해야 합니다. router-view 구성 요소에서 provide를 통해 relaod 메서드를 제공합니다. 테이블 데이터를 삭제하거나 편집한 후 inject를 사용하여 다시 로드 메서드를 트리거합니다. 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>

를 수정하고 다음과 같이 구현하세요.

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

이렇게 하면 빈 페이지가 없고 주소 표시줄에 빠른 전환 프로세스가 없으며 사용자 경험이 매우 친숙해집니다. 🎜🎜추천 학습: "🎜vue 비디오 튜토리얼🎜"🎜🎜

위 내용은 vue3에서 현재 페이지를 새로 고치는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!