基于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 相关文章推荐
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
深入理解JQuery keyUp和keyDown的区别
Dec 12 Javascript
jQuery基础的工厂函数以及定时器的经典实例分析
May 20 Javascript
jQuery实现的自适应焦点图效果完整实例
Aug 24 Javascript
JS百度地图搜索悬浮窗功能
Jan 12 Javascript
js仿淘宝评价评分功能
Feb 28 Javascript
详解JavaScript中return的用法
May 08 Javascript
vue动态路由配置及路由传参的方式
May 23 Javascript
vue中引入mxGraph的步骤详解
May 17 Javascript
jQuery中使用validate插件校验表单功能
May 24 jQuery
微信小程序中如何计算距离某个节日还有多少天
Jul 15 Javascript
antd 表格列宽自适应方法以及错误处理操作
Oct 27 Javascript
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
关于mysql字符集设置了character_set_client=binary 在gbk情况下会出现表描述是乱码的情况
2013/01/06 PHP
基于laravel-admin 后台 列表标签背景的使用方法
2019/10/03 PHP
jquery json 实例代码
2010/12/02 Javascript
不要使用jQuery触发原生事件的方法
2014/03/03 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
Bootstrap每天必学之轮播(Carousel)插件
2016/04/25 Javascript
javascript之Array 数组对象详解
2016/06/07 Javascript
AngularJS入门教程之静态模板详解
2016/08/18 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
详解用原生JavaScript实现jQuery的某些简单功能
2016/12/19 Javascript
vue.js中指令Directives详解
2017/03/20 Javascript
vue+vuex+axio从后台获取数据存入vuex实现组件之间共享数据
2017/04/22 Javascript
jQuery使用eraser.js插件实现擦除、刮刮卡效果的方法【附eraser.js下载】
2017/04/28 jQuery
解决vue router使用 history 模式刷新后404问题
2017/07/19 Javascript
浅谈Angular路由守卫
2017/08/26 Javascript
深入剖析Express cookie-parser中间件实现示例
2018/02/01 Javascript
js变量声明var使用与不使用的区别详解
2019/01/21 Javascript
解决vue单页面多个组件嵌套监听浏览器窗口变化问题
2020/07/30 Javascript
OpenLayers3实现地图鹰眼以及地图比例尺的添加
2020/09/25 Javascript
vue实现滚动鼠标滚轮切换页面
2020/12/13 Vue.js
[01:07:17]EG vs Optic Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[57:41]Secret vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.16
2018/08/17 DOTA
[55:23]VGJ.T vs Winstrike 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
详解python中xlrd包的安装与处理Excel表格
2016/12/16 Python
Python 访问限制 private public的详细介绍
2018/10/16 Python
python使用递归的方式建立二叉树
2019/07/03 Python
python中tkinter窗口位置\坐标\大小等实现示例
2020/07/09 Python
python爬虫中PhantomJS加载页面的实例方法
2020/11/12 Python
英国卫浴商店:Ergonomic Design
2019/09/22 全球购物
酒店应聘自荐信
2013/11/09 职场文书
合作经营协议书范本
2014/04/17 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
IT工程师岗位职责
2014/07/04 职场文书
2016计划生育先进个人事迹材料
2016/02/29 职场文书
大学生自我鉴定怎么写
2019/05/07 职场文书
Python FuzzyWuzzy实现模糊匹配
2022/04/28 Python