1.基本用法
vue2.0提供了一个keep-alive组件
用来缓存组件,避免多次加载相应的组件,减少性能消耗
有时候 可能需要缓存整个站点的所有页面,而页面一般一进去都要触发请求的
在使用keep-alive的情况下 将首次触发请求写在created钩子函数中,就能实现缓存,
2.缓存部分页面或者组件
(1)使用router. meta属性
// 这是目前用的比较多的方式
router设置
... routes: [ { path: '/', redirect: '/index', component: Index, meta: { keepAlive: true }}, { path: '/common', component: TestParent, children: [ { path: '/test2', component: Test2, meta: { keepAlive: true } } ] } .... // 表示index和test2都使用keep-alive (2).使用新增属性inlcude/exclude
2.1.0后提供了include/exclude两个属性 可以针对性缓存相应的组件
//其中a,b是组件的name
注意:这种方法都是预先知道组件的名称的
(3)动态判断
includedComponents动态设置即可
如果只想 router-view 里面某个组件被缓存，怎么办？
- 使用 include/exclude
- 增加 router.meta 属性
使用 include/exclude
// 组件 aexport default { name: 'a', data () { return {} }} exclude 例子类似
缺点：需要知道组件的 name，项目复杂的时候不是很好的选择
【加盐】使用 router.meta 拓展
假设这里有 3 个路由： A、B、C。
需求：
-
- 默认显示 A
- B 跳到 A，A 不刷新
- C 跳到 A，A 刷新
实现方式：
在 A 路由里面设置 meta 属性：
{ path: '/', name: 'A', component: A, meta: { keepAlive: true // 需要被缓存 }} 在 B 组件里面设置 beforeRouteLeave：
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive = true; // 让 A 缓存，即不刷新 next(); }}; 在 C 组件里面设置 beforeRouteLeave：
export default { data() { return {}; }, methods: {}, beforeRouteLeave(to, from, next) { // 设置下一个路由的 meta to.meta.keepAlive = false; // 让 A 不缓存，即刷新 next(); }};
这样便能实现 B 回到 A，A 不刷新；而 C 回到 A 则刷新。
keep-alive生命周期钩子函数：activated、deactivated
使用<keep-alive>会将数据保留在内存中，如果要在每次进入页面的时候获取最新的数据，需要在activated阶段获取数据，承担原来created钩子中获取数据的任务。
问题描述
在业务开发中，会有路由跳转但是返回需要保留数据的场景；vue 中提供了 keep-alive 来处理
解决方案
返回dom不让其重新刷新，在vue-view外面包一层, 当引入keep-alive的时候，页面第一次进入，钩子的触发顺序created-> mounted-> activated，退出时触发deactivated。当再次进入（前进或者后退）时，只触发activated。
事件挂载的方法等，只执行一次的放在 mounted 中；组件每次进去执行的方法放在 activated 中；
可以将 是否包裹 keep-alive 通过参数配置；| 1 2 3 4 5 6 | <keep-alive> <router-view v- if = "$route.meta.keepAlive" style= "min-height:100%" ></router-view> </keep-alive> <router-view v- if = "!$route.meta.keepAlive" style= "min-height:100%" ></router-view> //不需要刷新的路由配置里面配置 meta: {keepAlive: true}, 这个路由则显示在上面标签； //需要刷新的路由配置里面配置 meta: {keepAlive: false}, 这个路由则显示在下面标签； |
总结
路由大法不错，不需要关心哪个页面跳转过来的，只要 router.go(-1) 就能回去，不需要额外参数。
然而在非单页应用的时候，keep-alive 并不能有效的缓存了= =