vue index.html 缓存,解决vue单页面 回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新
A页:
B页:
解决方法:
利用keep-alive 缓存需要缓存的页面
1.在app.vue中改写router-view
2.在router/index.js中添加路由元信息,设置需要缓存的页面
keepAlive:设置需要缓存的页面
isBack:通过beforeRouteEnter这个钩子函数中的from参数判断是从哪个页面过来的,这个参数执行时,组件实例还没创建,不能在data中定义变量。所以我们可以在路由中定义一个变量isBack,用来判断。
{
path: '/trade',
name: 'trade',
component: () => import( /* webpackChunkName: "about" */ '@/views/trade.vue'),
meta: {
title:'trade.tradeTitle',
keepAlive: true, // 此组件需要被缓存
isBack:false, //用于判断上一个页面是哪个
}
},
{
path: '/detail/:id',
name: 'detail',
component: () => import( /* webpackChunkName: "about" */ '@/views/detail.vue'),
meta: {
title:'trade.detailTitle',
keepAlive: false,
isBack:false,//用于判断上一个页面是哪个
}
},
钩子函数的执行顺序:
不使用keep-alive
beforeRouteEnter --> created --> mounted --> destroyed
使用keep-alive
beforeRouteEnter --> created --> mounted --> activated --> deactivated
再次进入缓存的页面,只会触发beforeRouteEnter -->activated --> deactivated 。created和mounted不会再执行。我们可以利用不同的钩子函数,做不同的事。务必理解上述钩子函数的执行时机和执行顺序,本教程的核心就依赖于此钩子函数
activated和deactivated是使用keep-alive后,vue中比较重要的两个钩子函数,建议详细了解下。
在A页面中通过beforeRouteEnter这个钩子函数中判断是从哪个页面过来的
beforeRouteLeave(to, from, next) {
// 路由导航钩子,此时还不能获取组件实例 `this`,所以无法在data中定义变量(利用vm除外)
// 参考 https://router.vuejs.org/zh-cn/advanced/navigation-guards.html
// 所以,利用路由元信息中的meta字段设置变量,方便在各个位置获取。这就是为什么在meta中定义isBack
// 参考 https://router.vuejs.org/zh-cn/advanced/meta.html
if (from.path === '/detail'){
//判断是从哪个路由过来的,
//如果是B页面即detail页面过来的,表明当前页面不需要刷新获取新数据,直接用之前缓存的数据即可
to.meta.isBack = true;
}else{
to.meta.isBack = false;
}
next();
},
data中定义变量isFirstEnter用来判断是否第一次进入,或是否刷新了页面,默认false
data() {
return {
isFirstEnter:false,
};
},
created中把isFirstEnter变为true,说明是第一次进入或刷新了页面
created() {
this.isFirstEnter=true;
// 只有第一次进入或者刷新页面后才会执行此钩子函数
// 使用keep-alive后(2+次)进入不会再执行此钩子函数
this.$nextTick(() => {
this.getLists();
});
},
activated中增加判断条件
activated() {
if(this.$route.meta.isBack || !this.isFirstEnter){
// 如果isBack是false,表明需要获取新数据,否则就不再请求,直接使用缓存的数据
// 如果isFirstEnter是true,表明是第一次进入此页面或用户刷新了页面,需获取新数据
this.tradeList=[]
this.AjaxList = [] //把数据清空,可以稍微避免让用户看到之前缓存的数据
this.pageNum = 1;
this.$nextTick(() => {
this.getLists();
});
}else{
this.$route.meta.isBack=false
this.isFirstEnter=false;
}
},
以上这篇解决vue单页面 回退页面 keeplive 缓存问题就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。
vue index.html 缓存,解决vue单页面 回退页面 keeplive 缓存问题相关推荐
- vue index.php,如何解决vue $index报错问题
vue $index报错是因为vue已经移除了原来的$index和$key用法,变成了index和key,其解决办法就是修改$index和$key为index和key即可. 本教程操作环境:windo ...
- vue单页面 回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退 从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...
- vue重复路由_解决vue路由name同名,路由重复的问题
在项目中,想让路由后缀为空,或者index的时候,都跳转到路由为index的页面,于是在router中如下配置 routes: [{ path: '/', name: 'index', compone ...
- 京东一面:Spring 为何需要三级缓存解决循环依赖,而不是二级缓存?我懵了。。...
欢迎关注方志朋的博客,回复"666"获面试宝典 来源:cnblogs.com/semi-sub/p/13548479.html 前言 bean生命周期 三级缓存解决循环依赖 总结 ...
- 为什么Spring需要三级缓存解决循环依赖,而不是二级缓存?
来源:https://www.cnblogs.com/semi-sub/p/13548479.html 在使用spring框架的日常开发中,bean之间的循环依赖太频繁了,spring已经帮我们去解决 ...
- vue打包完index.html空白,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题-20210315083204.pdf-原创力文档...
解解决决Vue项项目目打打包包后后打打开开index.html页页面面显显示示空空白白以以及及图图片片路路径径错错误误的的问问题题 V ue项目运行npm run build后会生成一 dist文件夹 ...
- 【Vue】问题:解决苹果手机点击输入框页面自动放大问题
问题描述 在index.html文件中meta标签配置如下 <meta name="viewport" content="width=device-width, i ...
- 打包后index.html路径错误,解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题...
解决Vue项目打包后打开index.html页面显示空白以及图片路径错误的问题 2018年05月23日 10:05:35 for_weber 阅读数:14179 Vue项目运行npm run buil ...
- nginx配置解决vue单页面打包文件大,首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题 参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
最新文章
- export default用法vue_Vue组件通信—provide/inject
- 解决在freemarker中报空问题
- 【玩转cocos2d-x之三十】点九图和输入框的使用
- java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
- 分布式数据库clickhouse、tidb、palo对比
- Java源码混淆,jar包加密,禁止反编译jar包
- 支付宝辟谣交易 5 万受监控;App Store 宕机;谷歌抛弃 AI | 极客头条
- Sonar - 部署常见问题及解决方法
- xgboost安装_机器学习笔记(七)Boost算法(GDBT,AdaBoost,XGBoost)原理及实践
- 用matlab解系统框图,控制系统框图(请教matlab中怎么画控制系统流程框图?)
- windows便签快捷键_超级实用的Windows快捷键
- TI达芬奇系列TMS320DM8148浮点DSP C674x + ARM Cortex-A8高性能视频处理器;
- 大学——留德的路01
- 如何写公式提取车牌号
- 关于win7 出现两个本地连接不能上网的问题?
- python socket 获取目的ip getsockopt
- 我敢说,没人能超过这份产品经理推荐书单(40本)!
- 微信小程序语音聊天智能对话(demo)
- python 爬虫 爬取当当网图书信息
- Netcms oday 漏洞
热门文章
- .netCore在Linux容器上的发布
- python office插件_Office 数据可视化8大实用插件推荐
- ssh工作流程(工作原理)
- python下载m3u8视频_使用python 下载m3u8格式视频,并使用ffmpeg 合成视频
- FPGA的BRAM和distributed RAM学习
- Java 如何学习?这份5000页Java学习手册值得拥有,适合零基础自学也适合查漏补缺!
- 中国核电项目工程师圆满完成友勤2018年第七期P6软件培训课程。
- U盘AUTO病毒删除办法
- 一次解决Landsat 、哨兵Sentinel 21个光谱指数
- 激光雷达学习——二维激光雷达数据转PC2