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 相关文章推荐
JS window.opener返回父页面的应用
Oct 24 Javascript
根据出生日期自动取得星座的js代码
Jul 20 Javascript
javascript中的注释使用与注意事项小结
Sep 20 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
JS中的异常处理方法分享
Dec 22 Javascript
jquery实现点击弹出层效果的简单实例
Mar 03 Javascript
JQuery.validate在ie8下不支持的快速解决方法
May 18 Javascript
Bootstrap 3 进度条的实现
Feb 22 Javascript
Javascript继承机制详解
May 30 Javascript
js移动端事件基础及常用事件库详解
Aug 15 Javascript
Angular弹出模态框的两种方式
Oct 19 Javascript
在vue中使用Base64转码的案例
Aug 07 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
linux平台编译安装PHP7并安装Redis扩展与Swoole扩展实例教程
2016/09/30 PHP
jQuery Ajax 全解析
2009/02/08 Javascript
javascript 面向对象编程基础 多态
2009/08/21 Javascript
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
利用JavaScript检测CPU使用率自己写的
2014/03/22 Javascript
jQuery.parseJSON(json)将JSON字符串转换成js对象
2014/07/27 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
2015/10/15 Javascript
基于PHP和Mysql相结合使用jqGrid读取数据并显示
2015/12/02 Javascript
jQuery Mobile动态刷新页面样式的实现方法
2016/05/28 Javascript
jQuery mobile在页面加载时添加加载中效果 document.ready 和window.onload执行顺序比较
2016/07/14 Javascript
几句话带你理解JS中的this、闭包、原型链
2016/09/26 Javascript
JavaScript排序算法动画演示效果的实现方法
2016/10/18 Javascript
利用imgareaselect辅助后台实现图片上传裁剪
2017/03/02 Javascript
Angular.Js之Scope作用域的学习教程
2017/04/27 Javascript
webpack实现热加载自动刷新的方法
2017/07/30 Javascript
Nodejs把接收图片base64格式保存为文件存储到服务器上
2018/09/26 NodeJs
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python聚类算法之DBSACN实例分析
2015/11/20 Python
Python运行报错UnicodeDecodeError的解决方法
2016/06/07 Python
python实现简单http服务器功能
2018/09/17 Python
Django migrations 默认目录修改的方法教程
2018/09/28 Python
简单瞅瞅Python vars()内置函数的实现
2019/09/27 Python
python解析命令行参数的三种方法详解
2019/11/29 Python
Python Numpy数组扩展repeat和tile使用实例解析
2019/12/09 Python
韩国家庭购物网上商店:Nsmall
2017/05/07 全球购物
土木工程毕业生自荐信
2013/11/12 职场文书
物业招聘计划书
2014/01/10 职场文书
超市创业计划书
2014/04/24 职场文书
2014年信用社工作总结
2014/11/25 职场文书
优秀班主任事迹材料
2014/12/16 职场文书
让世界充满爱观后感
2015/06/10 职场文书
高三化学教学反思
2016/02/22 职场文书
Python&Matlab实现灰狼优化算法的示例代码
2022/03/21 Python
Meta增速拉垮,元宇宙难当重任
2022/04/29 数码科技