동일한 경로 점프 강제 새로 고침 보기

Vue는 단일 페이지 애플리케이션(SPA) 개발에 매우 ​​널리 사용되는 JavaScript 프레임워크입니다. Vue Router는 단일 페이지 애플리케이션을 개발하는 데 없어서는 안 될 요소입니다. Vue Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리자로, 개발자가 탐색 요청 처리를 위한 경로, 보기 및 동작을 쉽게 정의할 수 있도록 해줍니다.

Vue 라우터는 동일한 경로 사이를 이동할 때 기본적으로 페이지 콘텐츠를 다시 로드하지 않지만 캐시에서 이전에 로드된 콘텐츠를 읽습니다. 이 방법을 사용하면 성능이 향상될 수 있지만 페이지 콘텐츠가 업데이트된 후 즉시 최신 데이터를 표시해야 하는 경우와 같이 개발자가 페이지를 강제로 새로 고쳐야 하는 경우도 있습니다.

이 글에서는 Vue에서 동일한 경로를 강제로 새로 고치는 방법을 소개합니다.

문제 설명

Vue Router에서 동일한 경로 사이를 이동하면 Vue는 구성 요소를 다시 렌더링하지 않습니다. 이는 구성 요소의 수명 주기 후크 기능이 다시 트리거되지 않음을 의미합니다. 즉, 구성 요소의 데이터를 백엔드와 동기화 상태로 유지하려면 업데이트 논리를 수동으로 추가해야 합니다.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

이 예에서는 updateData 함수를 수동으로 호출하여 메시지 데이터를 업데이트하여 백엔드와 동기화되도록 합니다. 이 접근 방식으로 문제를 해결할 수 있지만 점프가 이루어질 때마다 업데이트 기능을 수동으로 호출하는 것은 번거로울 수 있으며, 특히 애플리케이션이 더 복잡해지면 더욱 그렇습니다.

Solution

Vue 라우터에는 현재 라우팅 정보가 포함된 $route라는 전역 변수가 내장되어 있습니다. $route를 추적하여 경로 변경을 감지하고 경로가 변경되면 구성 요소를 강제로 새로 고칠 수 있습니다.

컴포넌트의 생성 또는 마운트된 라이프사이클 후크 함수에 $route 리스너를 등록한 다음 $route가 변경되면 페이지를 강제로 새로 고칠 수 있습니다.

<template>
  <div>{{message}}</div>
</template>

<script>
export default {
  data() {
    return {
      message: ''
    }
  },
  mounted() {
    this.updateData()
    this.$router.afterEach((to, from) => {
      if (to.path === from.path) {
        this.$nextTick(() => {
          location.reload()
        })
      }
    })
  },
  methods: {
    updateData() {
      // 从后端请求最新数据
      this.message = 'Hello World'
    }
  }
}
</script>

이 예에서는 마운트된 라이프 사이클 후크에 $route 리스너를 등록하고 경로 변경이 감지되면 페이지를 강제로 새로 고칩니다. to.path 및 from.path를 사용하여 현재 경로가 이전 경로와 동일한지 비교합니다. 동일하다면 사용자가 현재 경로를 새로 고치고 있는 것으로 판단할 수 있습니다. 이때 location.reload() 함수를 통해 페이지를 강제로 새로 고칠 수 있습니다.

페이지를 강제로 새로 고치기 전에 Vue의 $nextTick() 기능을 사용했다는 점에 유의하세요. 이 함수는 데이터가 완전히 업데이트되었는지 확인하기 위해 DOM이 업데이트될 때까지 콜백 함수를 연기할 수 있습니다. $nextTick() 함수를 사용하지 않고 직접 페이지를 강제로 새로 고칠 경우 페이지 렌더링이 불완전하거나 데이터 업데이트가 지연될 수 있습니다.

요약

Vue 단일 페이지 애플리케이션을 개발할 때 동일한 경로 사이를 이동해야 하는 경우가 종종 있습니다. 기본적으로 Vue는 구성 요소를 다시 렌더링하지 않으므로 페이지 콘텐츠가 백엔드 데이터와 동기화되지 않을 수 있습니다. Vue Router에서 $route 변경 사항을 모니터링함으로써 동일한 경로 간의 점프를 감지하고 점프 시 페이지를 강제로 새로 고쳐 데이터 동기화 문제를 해결할 수 있습니다.

위 내용은 동일한 경로 점프 강제 새로 고침 보기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!