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 相关文章推荐
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
js或css文件后面跟参数的原因说明
Jan 09 Javascript
JQuery异步提交表单与文件上传功能示例
Jan 12 Javascript
javascript中replace使用方法总结
Mar 01 Javascript
详解react-native WebView 返回处理(非回调方法可解决)
Feb 27 Javascript
微信小程序自定义组件之可清除的input组件
Jul 17 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
vue.js实现带日期星期的数字时钟功能示例
Aug 28 Javascript
详解vue引入子组件方法
Feb 12 Javascript
ES6基础之解构赋值(destructuring assignment)
Feb 21 Javascript
详解vue中移动端自适应方案
May 05 Javascript
Vue最新防抖方案(必看篇)
Oct 30 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实现的在线人员函数库
2008/04/09 PHP
php中XMLHttpRequest(Ajax)不能设置自定义的Referer的解决方法
2011/11/26 PHP
PHP中new static() 和 new self() 的区别介绍
2015/01/09 PHP
PHP实现linux命令tail -f
2016/02/22 PHP
PHP实现获取并生成数据库字典的方法
2016/05/04 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Docker搭建自己的PHP开发环境
2018/02/24 PHP
通过实例解析PHP数据类型转换方法
2020/07/11 PHP
jquery自定义类似$.ajax()的方法实现代码
2013/08/13 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jquery使用ajax实现微信自动回复插件
2014/04/28 Javascript
在页面加载完成后通过jquery给多个span赋值
2014/05/21 Javascript
采用自执行的匿名函数解决for循环使用闭包的问题
2014/09/11 Javascript
AngularJS 过滤器(自带和自建)详解
2016/09/19 Javascript
AngularJS变量及过滤器Filter用法分析
2016/11/22 Javascript
bootstrap折叠调用collapse()后data-parent不生效的快速解决办法
2017/02/23 Javascript
jQuery Chosen通用初始化
2017/03/07 Javascript
Three.js如何实现雾化效果示例代码
2017/09/27 Javascript
JS控制鼠标拒绝点击某一按钮的实例
2017/12/29 Javascript
浅谈react-router@4.0 使用方法和源码分析
2019/06/04 Javascript
JS异步宏队列微队列原理详解
2020/09/09 Javascript
vue使用video插件vue-video-player详解
2020/10/23 Javascript
python编写爬虫小程序
2015/05/14 Python
Python必须了解的35个关键词
2020/07/16 Python
应届大学生的推荐信
2013/11/20 职场文书
党的群众路线教育实践方案
2014/05/11 职场文书
2014办公室副主任四风对照检查材料思想汇报
2014/09/20 职场文书
2014光棍节单身联谊活动策划书
2014/10/10 职场文书
2015年世界无烟日活动总结
2015/02/10 职场文书
部门经理迟到检讨书
2015/02/16 职场文书
财务个人年度总结范文
2015/02/26 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
Python基础之字符串格式化详解
2021/04/21 Python
Python入门之基础语法详解
2021/05/11 Python
Oracle中日期的使用方法实例
2022/07/07 Oracle