vue 프로젝트에서 새로 고침 효과를 얻지 않기 위해 연결 유지 구성 요소를 사용하는 방법

새로 고침 없는 효과를 얻기 위해 vue 프로젝트에서 연결 유지 구성 요소를 사용하는 방법

Vue 프로젝트에서는 페이지를 전환해야 하지만 페이지 상태를 유지해야 하는 경우가 종종 있습니다. 이때 Vue의 연결 유지 구성 요소를 사용하여 새로 고침 없는 효과를 얻을 수 있습니다. 연결 유지 구성 요소는 Vue에서 제공하는 추상 구성 요소로, 반복 렌더링을 피하기 위해 구성 요소 인스턴스를 캐시하는 데 사용됩니다.

다음으로, 연결 유지를 사용하여 새로 고침 없는 효과를 얻는 방법을 소개하는 간단한 예를 들어 보겠습니다.

먼저 Vue 프로젝트를 만들고 프로젝트에 Home과 About이라는 두 페이지를 만들어야 합니다.

홈 페이지에는 초기 값이 0인 카운터가 표시됩니다. 버튼을 클릭할 때마다 카운터 값이 1씩 증가합니다.

<template>
  <div>
    <h2>Home页面</h2>
    <p>计数器: {{ count }}</p>
    <button @click="increment">增加</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
};
</script>

정보 페이지에서는 카운터 값을 표시하고 홈 페이지로 돌아갈 수 있는 돌아가기 버튼을 제공합니다.

<template>
  <div>
    <h2>About页面</h2>
    <p>计数器的值: {{ count }}</p>
    <button @click="goBack">返回</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    }
  }
};
</script>

다음으로 라우팅 구성의 홈 및 정보 페이지에 연결 유지 구성 요소를 추가해야 합니다.

import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/views/Home.vue';
import About from '@/views/About.vue';

Vue.use(Router);

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Home',
      component: () => import('@/views/Home.vue'),
      meta: {
        keepAlive: true // 设置keep-alive为true
      }
    },
    {
      path: '/about',
      name: 'About',
      component: () => import('@/views/About.vue'),
      meta: {
        keepAlive: false // 设置keep-alive为false
      }
    }
  ]
});

여기에서는 홈 페이지의 연결 유지를 true로 설정하여 캐시를 켜고 정보 페이지의 연결 유지를 false로 설정하여 캐시를 끕니다.

마지막으로 App.vue 구성 요소에 연결 유지 구성 요소를 추가하고 경로의 연결 유지 구성에 따라 캐시를 동적으로 켜거나 꺼야 합니다.

<template>
  <div id="app">
    <keep-alive>
      <router-view :key="$route.fullPath"></router-view>
    </keep-alive>
  </div>
</template>

위 구성을 사용하면 이제 홈 페이지에서 "증가" 버튼을 클릭할 수 있습니다. 그러면 카운터 값이 증가하고 정보 페이지로 이동한 다음 홈 페이지로 돌아가면 카운터 값은 변경되지 않습니다. .

요약:

위의 예를 통해 keep-alive 구성 요소를 사용하면 새로 고침 없는 효과를 쉽게 얻을 수 있음을 알 수 있습니다. 경로의 메타 속성을 구성함으로써 구성 요소의 캐싱 전략을 유연하게 제어할 수 있습니다. 연결 유지 구성 요소는 페이지 상태를 유지해야 하거나 반복 렌더링을 방지해야 할 때 좋은 선택입니다.

이 기사의 예제가 연결 유지 구성 요소를 사용하여 Vue 프로젝트에서 새로 고침 없는 효과를 얻는 방법을 더 잘 이해하는 데 도움이 되기를 바랍니다. 질문이 있으시면 토론을 위해 메시지를 남겨주세요.

위 내용은 vue 프로젝트에서 새로 고침 효과를 얻지 않기 위해 연결 유지 구성 요소를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!