Vue Router가 원본 페이지를 유지하지 못하는 문제를 해결하는 방법

Vue Router는 Vue.js에서 공식적으로 제공하는 라우팅 관리 솔루션으로, 단일 페이지 애플리케이션(SPA)에서 페이지 점프 및 구성 요소의 동적 로딩을 실현할 수 있습니다. Vue Router의 중요성은 자명하며 프로젝트에 더 나은 사용자 경험과 효율성을 제공할 수 있습니다.

그러나 Vue Router를 사용할 때 문제가 발생할 수 있습니다. 페이지를 이동할 때 원본 페이지가 파괴되고 원래 상태와 데이터를 유지할 수 없습니다. 이러한 상황은 일반적으로 vue-router를 사용하여 하나의 도메인 이름이나 하위 도메인 이름에서 다른 도메인 이름이나 하위 도메인 이름의 페이지로 점프하는 등 도메인 간 페이지 점프를 수행할 때 발생합니다. 이때 경로는 한 웹 페이지에서 다른 웹 페이지로 연결되며 전체 페이지를 다시 로드해야 하며 이전 상태와 데이터는 손실됩니다.

그렇다면 Vue Router가 원본 페이지를 유지하지 못하는 문제를 해결하는 방법은 무엇일까요? 다음은 몇 가지 해결 방법입니다.

1. Keep-Alive 구성 요소 사용

Vue.js는 다시 렌더링하거나 삭제하지 않고 이미 로드된 구성 요소 인스턴스를 캐시할 수 있는 Keep-Alive 구성 요소를 제공합니다. 페이지가 이동할 때 원본 페이지의 상태와 데이터를 유지하려면 연결 유지 구성 요소를 사용하십시오.

다음과 같이 상태와 데이터를 유지해야 하는 구성 요소에 Keep-Alive 구성 요소를 추가합니다.

<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
  </div>
</template>

이러한 방식으로 페이지 점프 효과를 얻으면서 구성 요소 상태와 데이터를 유지할 수 있습니다.

2. 저장소 사용

Keep-Alive 구성 요소를 사용하지 않으려면 저장소를 사용하여 페이지 상태와 데이터를 저장할 수도 있습니다. 컴포넌트에서 beforeRouteLeave 경로 점프 라이프 사이클 함수를 듣고, 루트 점프 이후 생성된 라이프 사이클 함수에 Storage에 저장해야 하는 상태와 데이터를 저장하고, Storage에서 상태와 데이터를 읽어 컴포넌트에 복원합니다. .

구체적인 코드 구현은 다음과 같습니다.

// 路由跳转前保存组件状态和数据到Storage
beforeRouteLeave(to, from, next) {
  localStorage.setItem('data', JSON.stringify(this.data));
  next();
}
// 路由跳转后从Storage中读取组件状态和数据并赋值给组件
created() {
  let data = JSON.parse(localStorage.getItem('data'));
  if (data) {
    this.data = data;
  }
}

이렇게 하면 페이지가 점프할 때 원본 페이지의 상태와 데이터를 유지할 수 있습니다.

3. Vuex 사용

Vuex는 여러 구성 요소 간에 상태를 공유하기 위한 Vue.js용 상태 관리 프레임워크입니다. 페이지 상태와 데이터를 유지해야 하는 경우 Vuex를 사용하여 페이지 상태와 데이터를 전역 상태에 저장한 다음 전역 상태에서 읽어 페이지 이동 후 구성 요소에 할당할 수 있습니다.

구체적인 코드는 다음과 같이 구현됩니다.

// 在Vuex Store中定义状态和数据
const state = {
  data: {}
}
const mutations = {
  setData(state, data) {
    state.data = data;
  }
}
// 在组件中引入Vuex和Store，并将数据存储在全局状态中
import { mapMutations } from 'vuex';
export default {
  methods: {
    ...mapMutations(['setData']),
    beforeRouteLeave(to, from, next) {
      this.setData(this.data);
      next();
    }
  },
  created() {
    this.data = this.$store.state.data;
  }
}

이렇게 하면 페이지가 점프할 때 Vuex를 통해 원본 페이지의 상태와 데이터를 유지할 수 있습니다.

요약:

위는 Vue Router가 원본 페이지의 상태와 데이터를 유지하지 못하는 문제를 해결하기 위한 몇 가지 일반적인 솔루션입니다. 각 솔루션은 특정 비즈니스에 따라 적절한 솔루션을 선택할 수 있습니다. 필요합니다. Keep-Alive 구성 요소, Storage 또는 Vuex이든 페이지 이동 시 원래 상태와 데이터를 유지하여 사용자 경험과 효율성을 향상시키는 데 도움이 될 수 있습니다.

위 내용은 Vue Router가 원본 페이지를 유지하지 못하는 문제를 해결하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!