Vue의 연결 유지 구성 요소를 통해 경로 캐싱을 구현하는 방법

Vue의 연결 유지 구성 요소를 통해 경로 캐싱을 구현하는 방법

프런트 엔드 개발을 위해 Vue를 사용할 때 종종 필요한 사항이 발생합니다. 즉, 더 나은 사용자 경험을 달성하기 위해 경로를 전환할 때 이전 경로의 상태를 유지하기를 바랍니다. . Vue는 이러한 요구 사항을 충족하는 데 도움이 되는 연결 유지라는 구성 요소를 제공합니다.

keep-alive는 Vue에 내장된 추상 구성 요소로, 구성 요소의 캐싱 효과를 달성하기 위해 캐시해야 하는 구성 요소 외부에 래핑할 수 있습니다. 라우팅에서 연결 유지를 사용하는 경우 구성 요소 외부에 래핑할 수 있습니다. 다음으로 실제 예를 사용하여 연결 유지를 사용하여 경로 캐싱을 구현하는 방법을 보여 드리겠습니다.

먼저 Vue 프로젝트를 생성하고 vue-router 플러그인을 설치해야 합니다. 명령줄에서 다음 명령을 실행합니다.

vue create router-cache-demo
cd router-cache-demo
npm install vue-router

다음으로 아래와 같이 Home이라는 구성 요소를 만듭니다.

<template>
  <div>
    <h1>Home</h1>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

이 구성 요소는 버튼을 클릭하면 카운터와 버튼을 표시합니다. 1.

그런 다음 라우팅 구성 파일에서 홈 구성 요소를 도입하고 라우팅 경로를 설정해야 합니다.

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/Home.vue';

Vue.use(VueRouter);

const routes = [
  { path: '/', component: Home },
];

const router = new VueRouter({
  routes
});

export default router;

App.vue 파일에서는 구성 요소에 구성 요소를 래핑하고 Home 구성 요소를 캐시할 수 있도록 포함 속성을 설정합니다.

<template>
  <div id="app">
    <keep-alive :include="cachedComponents">
      <router-view />
    </keep-alive>
  </div>
</template>

<script>
export default {
  data() {
    return {
      cachedComponents: ['Home']
    };
  }
};
</script>

여기서는 캐시된 구성요소 배열을 설정하고 배열에 홈 구성요소를 추가하여 경로를 전환할 때 구성요소를 캐시하도록 Vue에 지시합니다.

마지막으로 main.js 파일에 라우팅 구성 파일을 도입하고 이를 Vue 인스턴스와 연결합니다.

import Vue from 'vue';
import App from './App.vue';
import router from './router';

new Vue({
  router,
  render: h => h(App)
}).$mount('#app');

이제 경로 전환을 시도할 수 있으며, 다른 경로로 전환한 다음 홈 경로로 다시 전환하면 이전 카운터 값이 여전히 유지된다는 것을 알 수 있습니다.

위 단계를 통해 Vue의 연결 유지 구성 요소를 성공적으로 사용하여 라우팅 캐싱 효과를 얻었습니다. 실제 필요에 따라 캐시해야 하는 라우팅 구성 요소를 자유롭게 설정할 수 있습니다.

요약: Vue의 연결 유지 구성 요소를 통해 라우팅 구성 요소의 캐싱을 구현하여 사용자 경험을 향상할 수 있습니다. 연결 유지를 사용할 때 라우팅 구성 요소를 래핑하고 App.vue 파일에 포함 속성을 설정하여 Vue에 캐시할 구성 요소를 알려야 합니다. 이 기사가 도움이 되기를 바랍니다!

위 내용은 Vue의 연결 유지 구성 요소를 통해 경로 캐싱을 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!