vue2에서 연결 유지를 사용하는 방법-JS 튜토리얼-php.cn

이번에는 vue2에서 keep-alive를 사용하는 방법과 vue2에서 keep-alive를 사용할 때 주의 사항이 무엇인지 보여드리겠습니다. 다음은 실제 사례입니다.

keep-alive는 Vue에 내장된 구성 요소로, DOM의 반복 렌더링을 방지하기 위해 구성 요소 전환 중에 메모리에 상태를 유지할 수 있습니다. vue-router와 결합하면 뷰의 전체 콘텐츠를 캐시할 수 있습니다.

기본 사용법

은 다음과 같습니다.

<keep-alive>
 <component>
 <!-- 该组件将被缓存！ -->
 </component>
</keep-alive>

로그인 후 복사

일반적으로 목록 페이지에 처음 들어갈 때 데이터를 요청해야 하는데, 목록 페이지에서 세부 정보 페이지로 들어가면 캐싱 없이 데이터를 요청한 후 반환되어야 합니다. 목록 페이지로

두 가지 상황이 있습니다: 1. 브라우저의 뒤로가기 버튼을 직접 클릭하세요.

2. 돌아가려면 탐색 모음에서 /list 링크를 클릭합니다.

따라서 첫 번째 경우에는 뒤로 버튼을 직접 사용하여 목록 페이지(/list)로 돌아갈 때 데이터를 요청할 필요가 없습니다.

두 번째 경우에는 링크를 통해 목록 페이지로 돌아가기 위한 데이터를 요청해야 합니다.

여기에는 세 가지 상황이 있습니다. 1. 기본적으로 목록 페이지에 진입하려면 데이터 요청이 필요합니다.

2. 세부정보 페이지에 진입한 후 브라우저의 기본 뒤로 버튼을 사용하여 돌아가면 Ajax 요청이 필요하지 않습니다.

3. 세부정보 페이지에 진입한 후 링크를 클릭하여 목록 페이지로 돌아온 후 Ajax 요청도 보내야 합니다.

구성은 다음과 같습니다.

항목 파일

app.vue의 구성은 다음과 같습니다.

<!-- 缓存所有的页面 -->
<keep-alive>
 <router-view v-if="$route.meta.keep_alive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keep_alive"></router-view>

로그인 후 복사

2. 라우터에서 메타

속성

을 설정하고 캐시를 사용해야 함을 나타내려면 keepAlive: true를 설정하고 캐시가 필요하지 않음을 나타내려면 false를 설정합니다. 그리고 스크롤 동작을 추가하세요. scrollBehavior router/index.js의 구성은 다음과 같습니다:

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
const router = new Router({
 mode: 'history', // 访问路径不带井号 需要使用 history模式，才能使用 scrollBehavior
 base: '/page/app', // 配置单页应用的基路径
 routes: [
 {
  path: '/',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存
  }
 },
 {
  path: '/list',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
  }
 },
 {
  path: '/detail',
  name: 'detail',
  component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
 }
 ],
 scrollBehavior (to, from, savedPosition) {
 // 保存到 meta 中，备用
 to.meta.savedPosition = savedPosition;
 if (savedPosition) {
  return { x: 0, y: 0 };
 }
 return {};
 }
});
export default router;

로그인 후 복사

3. list.vue 코드는 다음과 같습니다:

<template>
 <p class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/detail">跳转到detail页</router-link>
 </p>
</template>
<script>
export default {
 name: 'helloworld',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  'aa': 1
  };
  Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {
  console.log(res);
  });
 }
 },
 beforeRouteEnter(to, from, next) {
 next(vm => {
  /*
  如果 to.meta.savedPosition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据
  如果savedPosition === null, 那么说明是点击了导航链接;
  此时需要刷新数据，获取新的列表内容。
  否则的话 什么都不做，直接使用 keep-alive中的缓存
  */
  if (to.meta.savedPosition === undefined) {
  vm.ajaxRequest();
  }
  if (to.meta.savedPosition === null) {
  vm.ajaxRequest();
  }
 })
 }
};
</script>

로그인 후 복사

4. Detail.vue 코드는 다음과 같습니다:

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/list">返回列表页</router-link>
 </p>
</template>
<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to Your Vue.js App'
 };
 },
 created() {
 this.ajaxRequest();
 },
 methods: {
 ajaxRequest() {
  const obj = {
  'aa': 1
  };
  Promise.all([this.$store.dispatch('withdary', obj)]).then((res) => {
  console.log(res);
  });
 }
 }
};
</script>

로그인 후 복사

둘: router.meta 확장자를 사용하세요 이제 3페이지가 있고 요구 사항은 다음과 같다고 가정합니다.

1. 기본적으로 A페이지가 존재하며, A페이지가 들어오기 위해서는 요청이 필요합니다.

2. 페이지 B는 페이지 A로 이동하며 페이지 A는 다시 요청할 필요가 없습니다.

3. 페이지 C가 페이지 A로 이동하고 페이지 A를 다시 요청해야 합니다.

방법은 다음과 같습니다:

경로 A에서 메타 속성을 설정합니다:

{
 path: '/a',
 name: 'A',
 component: resolve => require(['@/views/a'], resolve),
 meta: {
 keepAlive: true // true 表示需要使用缓存
 }
}

로그인 후 복사

따라서 라우터/인덱스 아래의 모든 코드는 다음과 같습니다.

import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';

로그인 후 복사

Vue.use(라우터);

const router = new Router({
 mode: 'history', // 访问路径不带井号 需要使用 history模式，才能使用 scrollBehavior
 base: '/page/app', // 配置单页应用的基路径
 routes: [
 {
  path: '/',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存
  }
 },
 {
  path: '/list',
  name: 'list',
  component: resolve => require(['@/views/list'], resolve), // 使用懒加载
  meta: {
  keepAlive: true // true 表示需要使用缓存 false表示不需要被缓存
  }
 },
 {
  path: '/detail',
  name: 'detail',
  component: resolve => require(['@/views/detail'], resolve) // 使用懒加载
 },
 {
  path: '/a',
  name: 'A',
  component: resolve => require(['@/views/a'], resolve),
  meta: {
  keepAlive: true // true 表示需要使用缓存
  }
 },
 {
  path: '/b',
  name: 'B',
  component: resolve => require(['@/views/b'], resolve)
 },
 {
  path: '/c',
  name: 'C',
  component: resolve => require(['@/views/c'], resolve)
 }
 ],
 scrollBehavior (to, from, savedPosition) {
 // 保存到 meta 中，备用
 to.meta.savedPosition = savedPosition;
 if (savedPosition) {
  return { x: 0, y: 0 };
 }
 return {};
 }
});
export default router;

로그인 후 복사

B 컴포넌트에 beforeRouteLeave

beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = true; // 让A缓存，不请求数据
 next(); // 跳转到A页面
}

로그인 후 복사

설정 구성 요소 B의 모든 코드는 다음과 같습니다.

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </p>
</template>
<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to B Page'
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = true; // 让A缓存，不请求数据
 next(); // 跳转到A页面
 }
};
</script>

로그인 후 복사

C 구성 요소에서 beforeRouteLeave 설정:

beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = false; // 让A不缓存，重新请求数据
 console.log(to)
 next(); // 跳转到A页面
}

로그인 후 복사

c 컴포넌트의 모든 코드는 다음과 같습니다:

<template>
 <p class="list">
 <h1>{{msg}}</h1>
 <router-link to="/a">返回a页面</router-link>
 </p>
</template>
<script>
export default {
 name: 'list',
 data () {
 return {
  msg: 'Welcome to B Page'
 };
 },
 created() {},
 methods: {
 },
 beforeRouteLeave(to, from, next) {
 // 设置下一个路由meta
 to.meta.keepAlive = false; // 让A不缓存，重新请求数据
 console.log(to)
 next(); // 跳转到A页面
 }
};
</script>

로그인 후 복사

a 구성 요소 내의 모든 코드는 다음과 같습니다.

<template>
 <p class="hello">
 <h1>vue</h1>
 <h2>{{msg}}</h2>
 <router-link to="/b">跳转到b页面</router-link>
 <router-link to="/c">跳转到c页面</router-link>
 </p>
</template>
<script>
export default {
 name: 'helloworld',
 data () {
 return {
  msg: 'Welcome to A Page'
 };
 },
 methods: {
 ajaxRequest() {
  const obj = {
  'aa': 1
  };
  Promise.all([this.$store.dispatch('testUrl', obj)]).then((res) => {});
 }
 },
 beforeRouteEnter(to, from, next) {
 next(vm => {
  /*
  如果 to.meta.savedPosition === undefined 说明是刷新页面或可以叫第一次进入页面 需要刷新数据
  如果to.meta.keepAlive === false, 那么说明是需要请求的;
  此时需要刷新数据，获取新的列表内容。
  否则的话 什么都不做，直接使用 keep-alive中的缓存
  */
  if (to.meta.savedPosition === undefined) {
  vm.ajaxRequest();
  }
  if (!to.meta.keepAlive) {
  vm.ajaxRequest();
  }
 })
 }
};
</script>

로그인 후 복사

구성요소 b는 구성요소 a에서 데이터를 다시 요청하지 않으며(링크 및 브라우저 뒤로 버튼 클릭 포함) 구성요소 c는 구성요소 a에서 데이터를 요청합니다(링크 및 브라우저 뒤로 버튼 클릭 포함). 이 기사의 사례 읽기 방법, 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사에 주목하세요!