基于vue中keep-alive缓存问题的解决方法


Posted in Javascript onSeptember 21, 2018

vue开发的时候,我们经常会有这样的需求:开发一个详细页面来展示商品的详细信息,根据列表页传入的id进行请求,拿到对应的数据进行渲染。

但是一般在路由上都会加上keep-alive保持数据的状态,除非强制无缓存刷新,这就导致第一次进入详情页面时,可以在created中拿到id,但是返回后,再点击进入,就不会再走相应的生命周期了,无法拿到新的id

这时候可以使用vue的$destroy()方法

这是vue的一个生命周期,完全销毁一个实例。清理它与其它实例的连接,解绑它的全部指令及事件监听器。

不用$destroy方法的时候可以用watch监听路有变化来实现效果

created() {
  this.goodsId = this.$route.query.goodsId;
  this.getGoodsInfo();
 },
 watch: {
  '$route'(to, from) {
  if(to.name === 'GoodsDetail') {
   this.goodsId = to.query.goodsId;
   this.getGoodsInfo();
  }
  }
 }

用$destroy方法

created() {
  if(this.goodsId !== this.$route.query.goodsId) {
  this.$destroy();
  }
  this.goodsId = this.$route.query.goodsId;
  this.getGoodsInfo();
 }

以上这篇基于vue中keep-alive缓存问题的解决方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
DOMAssitant最新版 DOMAssistant 2.5发布
Dec 25 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
BootStrap框架中的data-[ ]自定义属性理解(推荐)
Feb 14 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
Mar 06 Javascript
Node.js通过身份证号验证年龄、出生日期与性别方法示例
Mar 09 Javascript
jQuery的Ajax接收java返回数据方法
Aug 11 jQuery
详解如何在Vue里建立长按指令
Aug 20 Javascript
vue路由事件beforeRouteLeave及组件内定时器的清除方法
Sep 29 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
JS实现简易贪吃蛇游戏
Aug 24 Javascript
Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
Apr 17 Vue.js
vue中前进刷新、后退缓存用户浏览数据和浏览位置的实例讲解
Sep 21 #Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 #Javascript
详解Vue改变数组中对象的属性不重新渲染View的解决方案
Sep 21 #Javascript
默认浏览器设置及vue自动打开页面的方法
Sep 21 #Javascript
详解Vue中数组和对象更改后视图不刷新的问题
Sep 21 #Javascript
详解vue 数组和对象渲染问题
Sep 21 #Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
Sep 21 #Javascript
You might like
PHP下载生成的csv文件及问题总结
2015/08/06 PHP
JavaScript库 开发规则
2009/01/31 Javascript
WordPress 照片lightbox效果的运用几点
2009/06/22 Javascript
Javascript 继承实现例子
2009/08/12 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
jQuery封装的获取Url中的Get参数示例
2013/11/26 Javascript
关于JS中的apply,call,bind的深入解析
2016/04/05 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
基于JS实现导航条之调用网页助手小精灵的方法
2016/06/17 Javascript
JavaScript中push(),join() 函数 实例详解
2016/09/06 Javascript
使用smartupload组件实现jsp+jdbc上传下载文件实例解析
2017/01/05 Javascript
从零学习node.js之文件操作(三)
2017/02/21 Javascript
JS栈stack类的实现与使用方法示例
2019/01/31 Javascript
vue实现全匹配搜索列表内容
2019/09/26 Javascript
javascript中layim之查找好友查找群组
2021/02/06 Javascript
bpython 功能强大的Python shell
2016/02/16 Python
wxpython中Textctrl回车事件无效的解决方法
2016/07/21 Python
Python学习思维导图(必看篇)
2017/06/26 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
Python检查ping终端的方法
2019/01/26 Python
Python Opencv任意形状目标检测并绘制框图
2019/07/23 Python
django-csrf使用和禁用方式
2020/03/13 Python
解决pyinstaller打包运行程序时出现缺少plotly库问题
2020/06/02 Python
keras和tensorflow使用fit_generator 批次训练操作
2020/07/03 Python
Python 如何对文件目录操作
2020/07/10 Python
Python2手动安装更新pip过程实例解析
2020/07/16 Python
Python切片列表字符串如何实现切换
2020/08/06 Python
APM Monaco中国官网:来自摩纳哥珠宝品牌
2017/12/27 全球购物
致短跑运动员广播稿
2014/01/09 职场文书
运动会入场解说词
2014/02/07 职场文书
总账会计岗位职责
2014/03/13 职场文书
工作失职造成投诉的检讨书范文
2014/10/05 职场文书
2015年感恩节活动总结
2015/03/24 职场文书
房产销售员2015年终工作总结
2015/10/22 职场文书
《遗弃》开发商删推文要跑路?官方回应:还在开发
2022/04/03 其他游戏