这次给大家带来keep-alive在vue2中应该怎样使用,keep-alive在vue2中使用的注意事项有哪些,下面就是实战案例,一起来看一下。
keep-alive 是Vue的内置组件,能在组件切换过程中将状态保留在内存中,防止重复渲染DOM。结合vue-router中使用,可以缓存某个view的整个内容。
基本使用如下:
<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. 在router中设置meta属性,设置 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 路由里面设置 meta 属性:
{
path: '/a',
name: 'A',
component: resolve => require(['@/views/a'], resolve),
meta: {
keepAlive: true // true 表示需要使用缓存
}
}
所以router/index下的所有代码变为如下:
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;
在 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组件请求数据(包括点击链接和浏览器后退按钮).
相信看了本文案例你已经掌握了方法,更多精彩请关注Gxl网其它相关文章!
推荐阅读:
nodejs怎么实现gulp打包功能
webpack构建多页面应用的步骤分析
温馨提示:答案为网友推荐,仅供参考