vue keep-alive请求数据的方法示例


Posted in Javascript onMay 16, 2018

背景

index页面:首页品牌入口

list页面:商品列表页面

product页面:商品详情页面

从index页面进入list的时候要刷新页面,从product页面返回list的时候不需要刷新页面,所以list使用了keep-alive的属性,keepAlive设置为true,但是开发过程中发现一个问题,从product返回到list的时候,列表页面不是正确的品牌列表,而是之前一次点击的品牌列表。由于每个人遇到关于keep-alive请求数据不正确的问题不同,这里就直接说我的解决办法。希望能给大家一个思路。

解决办法

很多人都会通过修改keepAlive来改变keep-alive,我尝试后还是不行,就换了个思路

钩子函数的执行顺序

不使用keep-alive

beforeRouteEnter --> created --> mounted --> destroyed

使用keep-alive

beforeRouteEnter --> created --> mounted --> activated --> deactivated

先扫盲,多少人和我都不知道上面的知识,在keep-alive的页面中,可以在 activated获取this.$route.params的参数

避开了设置keepAlive导致product返回的时候数据不对,当页面进入list的时候都是缓存状态,然后再通过是不是由index进入来判断是否执行activated里的函数,

list.vue 

beforeRouteEnter(to, from, next) {
   //判断从index页面进入,将list的isBack设置为true
   //这样就可以请求数据了
     if (from.name == 'index') {
      to.meta.isBack = true;
     }
     next();
   },
   activated: function () {
     if (this.$route.meta.isBack || this.isFirstEnter) {
      //清理已有商品列表的数据,重新请求数据,如果不清除的话就会有之前的商品缓存,延迟显示最新的商品
      this.proData = [];
      //请求数据
      this.fetchData();
     }
     //重新设置当前路由的isBack
     this.$route.meta.isBack = false;
     //重新设置是否第一次进入
     this.isFirstEnter = false;
   },
   mounted: function () {
    //如果是第一次进入,或者刷新操作的话,也请求数据
     this.isFirstEnter = true;
   },

router.js

const appRouter = {
 mode: "history",
 base: "/m/",
 routes: [
  {
   path: "",
   redirect: "/index"
  },
  {
   path: "/index",
   name: "index",
   component: Index,
   meta: {
    keepAlive: true
   }
  },
    {
   path: "/list",
   name: "list",
   component: List,
   meta: {
    keepAlive: true,
    isBack: false //isback是true的时候请求数据,或者第一次进入的时候请求数据
   }
  },
  {
   path: "/product/:id",
   name: "product",
   component: Product,
   meta: {
    keepAlive: false
   }
  }
  
 ]
};

Vue.use(Router);
export default new Router(appRouter);

不知道有咩有帮大家理清思路,有问题可以留言,以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Safari5中alert的无限循环BUG
Apr 07 Javascript
jQuery的初始化与对象构建之浅析
Apr 12 Javascript
33个优秀的 jQuery 图片展示插件分享
Mar 14 Javascript
JavaScript自执行闭包的小例子
Jun 29 Javascript
jquery的相对父元素和相对文档定位示例代码
Aug 02 Javascript
JavaScript实现购物车基本功能
Jul 21 Javascript
Vue兼容ie9的问题全面解决方案
Jun 19 Javascript
chosen实现省市区三级联动
Aug 16 Javascript
JavaScript实现省市区三级联动
Feb 13 Javascript
浅析vue cli3 封装Svgicon组件正确姿势(推荐)
Apr 27 Javascript
jquery实现上传图片功能
Jun 29 jQuery
three.js显示中文字体与tween应用详析
Jan 04 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
May 16 #Javascript
vue-cli与webpack处理静态资源的方法及webpack打包的坑
May 15 #Javascript
JavaScript常用截取字符串的三种方式用法区别实例解析
May 15 #Javascript
vue中keep-alive的用法及问题描述
May 15 #Javascript
react中使用swiper的具体方法
May 15 #Javascript
vue addRoutes实现动态权限路由菜单的示例
May 15 #Javascript
浅谈AngularJS中$http服务的简单用法
May 15 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
php提示无法加载或mcrypt没有找到 PHP 扩展 mbstring解决办法
2012/03/27 PHP
解析Ubuntu下crontab命令的用法
2013/06/24 PHP
php短网址和数字之间相互转换的方法
2015/03/13 PHP
php 二维数组时间排序实现代码
2016/11/19 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
thinkPHP框架实现的无限回复评论功能示例
2018/06/09 PHP
Laravel 前端资源配置教程
2019/10/18 PHP
jQuery 页面 Mask实现代码
2010/01/09 Javascript
window.addEventListener来解决让一个js事件执行多个函数
2012/12/26 Javascript
解决JQeury显示内容没有边距内容紧挨着浏览器边线
2013/12/20 Javascript
在JS数组特定索引处指定位置插入元素的技巧
2014/08/24 Javascript
Javascript获取当前时间函数和时间操作小结
2014/10/01 Javascript
JavaScript实现随机替换图片的方法
2015/04/16 Javascript
jquery实现鼠标滑过小图查看大图的方法
2015/07/20 Javascript
基于JavaScript实现鼠标悬浮弹出跟随鼠标移动的带箭头的信息层
2016/01/18 Javascript
基于javascript制作经典传统的拼图游戏
2016/03/22 Javascript
JavaScript制作颜色反转小游戏
2016/09/25 Javascript
vue中渐进过渡效果实现
2016/10/27 Javascript
Hexo已经看腻了,来手把手教你使用VuePress搭建个人博客
2018/04/26 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
一篇文章让你搞懂JavaScript 原型和原型链
2020/11/23 Javascript
python 快速排序代码
2009/11/23 Python
Python+matplotlib+numpy绘制精美的条形统计图
2018/01/02 Python
Python3.5 Pandas模块之Series用法实例分析
2019/04/23 Python
python命令行参数用法实例分析
2019/06/25 Python
简单分析python的类变量、实例变量
2019/08/23 Python
Python类的继承super相关原理解析
2020/10/22 Python
Python通过yagmail实现发送邮件代码解析
2020/10/27 Python
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
高校教师思想汇报
2014/01/11 职场文书
汽车销售员如何做职业生涯规划
2014/02/16 职场文书
岗位说明书怎么写
2014/07/30 职场文书
委托书的写法
2014/09/16 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书
.Net Core导入千万级数据至Mysql的步骤
2021/05/24 MySQL