keep-alive 是Vue的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM。结合vue-router中使用，可以缓存某个view的整个内容。
基本使用如下：
rush:js;">
一般有这样的需求，当我们第一次进入列表页需要请求一下数据，当我从列表页进入详情页，详情页不缓存也需要请求下数据，然后返回列表页
有两个情况：
1. 直接点击浏览器的后退返回按钮。
2. 点击导航栏中的 /list的链接返回。
那么针对第一种情况下，我们直接通过后退按钮时，返回到列表页(/list) 是不需要请求数据。
针对第二种情况下，我们通过链接返回到列表页是需要请求数据。
所以这边有三种情况：
1. 默认进来列表页需要请求数据。
2. 进入详情页后，通过浏览器默认后退按钮返回，是不需要ajax的请求的。
3. 进入详情页后，通过点击链接返回到列表页后，也是需要发ajax请求的。
配置如下：
1. 入口文件 app.vue 的配置如下：
rush:js;">
Meta.keep_alive">
Meta.keep_alive">
2. 在router中设置Meta属性，设置 keepAlive: true 表示需要使用缓存，false的话表示不需要使用缓存。且添加滚动行为 scrollBehavior
router/index.js 的配置如下：
require(['@/views/list'],resolve),// 使用懒加载
Meta: {
keepAlive: true // true 表示需要使用缓存
}
},{
path: '/list',// 使用懒加载
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 代码如下：
4. detail.vue 代码如下：
二：使用router.Meta 扩展
假设现在有3个页面，需求如下：
1. 默认有A页面，A页面进来需要一个请求。
2. B页面跳转到A页面，A页面不需要重新请求。
3. C页面跳转到A页面，A页面需要重新请求。
实现方式如下：
在 A 路由里面设置 Meta 属性：
require(['@/views/a'],
Meta: {
keepAlive: true // true 表示需要使用缓存
}
}
所以router/index下的所有代码变为如下：
rush:js;">
import Vue from 'vue';
import Router from 'vue-router';
// import HelloWorld from '@/views/HelloWorld';
Vue.use(Router);
require(['@/views/b'],resolve)
},{
path: '/c',name: 'C',component: resolve => require(['@/views/c'],resolve)
}
],y: 0 };
}
return {};
}
});
export default router;
在 B 组件里面设置 beforeRouteLeave
rush:js;">
beforeRouteLeave(to,next) {
// 设置下
一个路由
Meta
to.
Meta.keepAlive = true; // 让A缓存，不请求数据
next(); //
跳转到A
页面
}
B组件所有代码如下：
在 C 组件里面设置 beforeRouteLeave：
rush:js;">
beforeRouteLeave(to,next) {
// 设置下
一个路由
Meta
to.
Meta.keepAlive = false; // 让A不缓存，重新请求数据
console.log(to)
next(); //
跳转到A
页面
}
c组件所有代码如下：
a组件内的所有的代码如下：
rush:js;">
vue
{{msg}}
跳转到b页面
跳转到c页面
注意 b组件到a组件不重新请求数据 (包括点击链接和浏览器后退按钮)，c组件到a组件请求数据(包括点击链接和浏览器后退按钮).
代码
总结
以上所述是小编给大家介绍的vue2中的keep-alive使用总结及注意事项。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
