vue2에서 연결 유지를 사용하는 방법
- 亚连원래의
- 2018-06-19 14:47:562494검색
vue2.0은 해당 구성 요소를 여러 번 로드하지 않고 성능 소비를 줄이기 위해 구성 요소를 캐시하는 연결 유지 구성 요소를 제공합니다. 이 글에서는 vue2의 keep-alive 사용에 대한 요약과 주의사항을 소개합니다. 필요하신 분들은 참고하시면 됩니다
keep-alive는 Vue에 내장된 구성요소로, 도중에 메모리에 상태를 유지할 수 있습니다. DOM의 반복 렌더링을 방지하기 위한 구성 요소 전환 프로세스입니다. vue-router와 결합하면 뷰의 전체 콘텐츠를 캐시할 수 있습니다.
기본 사용법은 다음과 같습니다.
<keep-alive> <component> <!-- 该组件将被缓存！ --> </component> </keep-alive>
일반적으로 목록 페이지에 처음 들어갈 때 목록 페이지에서 세부 정보 페이지에 들어갈 때 데이터를 요청해야 합니다. 페이지는 캐시되지 않더라도 데이터를 요청한 다음 목록으로 돌아가야 합니다. 페이지
두 가지 상황이 있습니다.
1. 브라우저의 뒤로 버튼을 직접 클릭합니다.
2. 돌아가려면 탐색 모음에서 /list 링크를 클릭하세요.
따라서 첫 번째 경우에는 뒤로 버튼을 직접 사용하여 목록 페이지(/list)로 돌아갈 때 데이터를 요청할 필요가 없습니다.
두 번째 경우에는 링크를 통해 목록 페이지로 돌아가서 데이터를 요청해야 합니다.
여기에는 세 가지 상황이 있습니다.
1 기본적으로 목록 페이지에 들어갈 때 데이터를 요청해야 합니다.
2. 세부정보 페이지에 들어간 후 브라우저의 기본 뒤로 버튼을 사용하여 돌아가면 Ajax 요청이 필요하지 않습니다.
3. 세부정보 페이지에 들어간 후 링크를 클릭하여 목록 페이지로 돌아온 후 Ajax 요청도 보내야 합니다.
구성은 다음과 같습니다.
1. 항목 파일 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(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) // 使用懒加载
},
{
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;Set beforeRouteLeave in B 구성 요소
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 구성 요소로 데이터를 요청합니다( 링크 클릭 및 브라우저 뒤로 버튼 클릭 포함)
위 내용은 모든 사람을 위해 정리한 내용이며, 앞으로 모든 사람에게 도움이 되기를 바랍니다.
관련 기사:
JavaScript를 사용한 비동기 구현보다 더 나은 솔루션이 있습니까?
Bootstrap 프레임워크에서 treeview를 사용하여 동적으로 데이터를 로드하는 방법
위 내용은 vue2에서 연결 유지를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!