该dome一个案例是用keep-alive实现 'form表单' 点击跳转 '阅读活动协议页' 再返回表单数据不刷新进行缓存。

另一个是keep-alive实现 '信息列表页' 滚动到某一位置点击跳转'详情页'再返回，保留列表上次滚动到的位置。

而且用keep-alive来实现这些效果，比使用vuex或者sessionStorage这两种方法要合理，不用重复调本地缓存，再渲染。

效果图：

dome下载链接：

https://download.csdn.net/download/caimingxian401/11376624

keep-alive是vue内置的一个组件，用来对所包裹的组件进行缓存，避免返回页面重新渲染，达到节省性能。

它实现缓存有两种写法：

第一种：

//在App.vue页面
<template><div id="app"><!-- $route.meta.keepAlive为true设置缓存 --><keep-alive><router-view v-if="$route.meta.keepAlive" /></keep-alive><!-- $route.meta.keepAlive为false正常显示 --><router-view v-if="!$route.meta.keepAlive" /><!-- router-view 也是一个组件，如果直接被包在 keep-alive 里面，所有路径匹配到的视图组件都会被缓存 --></div>
</template><script>
export default {name: 'App',data () {return {}}
}
</script>

//路由设置
import Vue from 'vue'
import Router from 'vue-router'import index from './views/index'
import test from './views/test';
import pagea from './components/pageA';
import agree from './components/agree';Vue.use(Router)export default new Router({
//mode: 'history',base: process.env.BASE_URL,routes: [{path: '/',name: 'index',component: index},//form表单缓存页面{path: '/test',name: 'test',component: test,meta: {keepAlive: true}//需要缓存的页面},{path: '/pageA',name: 'pageA1',component: pagea},{path: '/agree',name: 'agree',component: agree}]
})

//test.vue
<template><div class="index">666<!--form表单组件--><pageA /></div>
</template><script>
import pageA from '@/components/pageA.vue';export default {components: {pageA},data() {return {};},methods: {},mounted() {console.log(this.$route.meta.keepAlive);}
};
</script><style>
.index{font-size: .12rem;
}
</style>

按照上面的流程操作，会发现第一次从首页进入test.vue，填写表单信息，再跳转到'协议页'返回，test.vue页面信息有缓存。但是再返回首页，再进去test.vue，会发现表单缓存仍然存在。按正常情况，首页进入test.vue页面，表单信息应该重新刷新，为空。

所以我们需要在test.vue页面再加个判断，进入该页面是否要清除keepalive的缓存。清除缓存参考下面的连接：

https://segmentfault.com/a/1190000015845117

在test.vue的beforeRouteLeave()事件，添加删除keepalive缓存逻辑，如下：

  beforeRouteLeave(to, from, next) {//如果跳转的下一页，不是协议页，则删除缓存if (to.name != "agree"){//此处判断是如果返回上一层，你可以根据自己的业务更改此处的判断逻辑，酌情决定是否摧毁本层缓存。//销毁已缓存的keepalive组件if (this.$vnode && this.$vnode.data.keepAlive){if (this.$vnode.parent && this.$vnode.parent.componentInstance && this.$vnode.parent.componentInstance.cache){if (this.$vnode.componentOptions){var key = this.$vnode.key == null? this.$vnode.componentOptions.Ctor.cid + (this.$vnode.componentOptions.tag ? `::${this.$vnode.componentOptions.tag}` : ''): this.$vnode.key;var cache = this.$vnode.parent.componentInstance.cache;var keys  = this.$vnode.parent.componentInstance.keys;if (cache[key]) {if (keys.length) {var index = keys.indexOf(key);if (index > -1) {keys.splice(index, 1);}}delete cache[key];}}}}this.$destroy();}next();}

第二种：

另一种实现缓存的方法也需更改路由页的写法：

import Vue from 'vue'
import Router from 'vue-router'import index from './views/index'
import test from './views/test';
import pagea from './components/pageA';
import agree from './components/agree';Vue.use(Router)export default new Router({
//mode: 'history',base: process.env.BASE_URL,routes: [{path: '/',name: 'index',component: index},{path: '/test',name: 'test',component: test,children: [    //需要执行缓存有关联操作的页面，都要写在children下{path: '/test',name: 'pageA1',component: pagea,},{path: '/agree',name: 'agree',component: agree}]}]
})

App.vue页面不用再添加keepalive组件，改在test.vue页面添加keepalive组件：

include - 字符串或正则表达，只有匹配的组件会被缓存
exclude - 字符串或正则表达式，任何匹配的组件都不会被缓存

//test.vue
<template><div class="index">666<!-- <keep-alive :include="['PageA']" > --><keep-alive include="PageA" ><router-view /></keep-alive><!-- name 为 PageA 的组件将被缓存！ -->  </div>
</template><style>
.index{font-size: .12rem;
}
</style>

include里面放的是组件的name，注意不是路由的name。

include里面能写字符串，也能用数组，正则来表达。

生命周期钩子函数：activated、deactivated

当引入keep-alive时候，页面进入跟离开便会触发两个钩子。

activated是进入(前进或后退) 缓存页面时执行一次，deactivated是离开(前进或后退) 缓存页面时执行一次。

第一次进入页面，钩子执行顺序：

created-> mounted-> activated

注意：第一次进入页面时会执行一次created钩子，但在缓存清除之前，不管页面离开或进入都不会执行created，只执行activated或deactivated。如果清除keep-alive缓存或者刷新页面，生命周期便会从created重新开始执行一遍。

//pageA.vue组件页面
created () {console.log('Created: PageA')},
activated() {console.log('activated: PageA')
},
deactivated() {console.log('deactivated: PageA')
},

* 喜欢可点赞/ 收藏/ 评论/ 打赏，有人回应才有动力继续更新哒！\‘▽′/

vue keep-alive案例全教程相关推荐

java开发五年多少钱，附超全教程文档
一.分布式架构学习路线图据统计,人的阅读时间在20分钟以内是能够达到全身心投入的,顾文章单张篇幅以后会尽量缩短,但更新会尽量相应频繁一些. 二.计算机软件发展历史首先我们了解下计算机软件的发展历史 ...
Docker最全教程——Redis容器化以及排行榜实战（十三）
Docker最全教程--Redis容器化以及排行榜实战(十三) 原文:Docker最全教程--Redis容器化以及排行榜实战(十三) 前言容器教程的路还很长,笔者尽量根据实践来不断地完善.由于在编写 ...
vue设置cookie的domain无效_【Vue.js入门到实战教程】16Tailwind 与 Bootstrap 的区别和使用入门...
来源 | https://xueyuanjun.com/post/22065我们知道,从 Laravel 8 开始,自带前端脚手架代码默认兼容 Tailwind CSS 框架,取代了之前的 Boots ...
Docker最全教程——数据库容器化（十一）
终于按时完成第二篇.本来准备着手讲一些实践,但是数据库部分没有讲到,部分实践会存在一些问题,于是就有了此篇以及后续--数据库容器化.本篇将从SQL Server容器化实践开始,并逐步讲解其他数据库的容 ...
Docker最全教程——从理论到实战（四）
容器是应用走向云端之后必然的发展趋势,因此笔者非常乐于和大家分享我们这段时间对容器的理解.心得和实践. 本篇教程持续编写了2个星期左右并且一直在完善.补充具体的细节和实践,预计全部完成需要1到2个月的 ...
Docker最全教程——从理论到实战（三）
容器是应用走向云端之后必然的发展趋势,因此笔者非常乐于和大家分享我们这段时间对容器的理解.心得和实践. 本篇教程持续编写了2个星期左右,只是为了大家更好地了解.理解和消化这个技术,能够搭上这波车. 你 ...
【前端】Vue+Element UI案例：通用后台管理系统-用户管理：Table表格增删查改、Pagination分页、搜索框
文章目录目标代码 0.结构 1.按钮-删除 2.按钮-编辑 3.debug 4.样式 5.分页Pagination:功能 6.分页Pagination:样式 7.搜索框:功能 8.搜索框:样式总 ...
20-《电子入门趣谈》第四章_自己制作电路板-4.1面包板的介绍和经典案例使用教程
好消息:请在手机淘宝或闲鱼上搜索"电子入门趣谈",有惊喜哦 :) 我把全本电子入门趣谈的电子版(包括科技提升和理论升华部分,共计50余万字)放到上面开始兜售啦,如果您真的喜欢这本书 ...
视频教程-Python开发全教程-Python
Python开发全教程目前就职于中国唯品会做iOS开发工程师,在良师益友网,麦子学院任职iOS讲师,出版iOS编程学习书籍<7天玩转iOS界面开发>,<初级到AppStore上架& ...
21-《电子入门趣谈》第四章_自己制作电路板-4.2洞洞板的介绍和经典案例使用教程
好消息:请在手机淘宝或闲鱼上搜索"电子入门趣谈",有惊喜哦 :) 我把全本电子入门趣谈的电子版(包括科技提升和理论升华部分,共计50余万字)放到上面开始兜售啦,如果您真的喜欢这本书 ...

vue keep-alive案例全教程

第一种：

第二种：

生命周期钩子函数：activated、deactivated

vue keep-alive案例全教程相关推荐

最新文章

热门文章