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代码,用以防止图片撑破页面
Mar 12 Javascript
JavaScript 变量基础知识
Nov 07 Javascript
js实现在字符串中提取数字
Nov 05 Javascript
js中浮点型运算BUG的解决方法说明
Jan 06 Javascript
JavaScript时间转换处理函数
Apr 14 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
利用JavaScript脚本实现滚屏效果的方法
Jul 07 Javascript
一种Javascript解释ajax返回的json的好方法(推荐)
Jun 02 Javascript
详解jQuery中的isPlainObject()使用方法
Feb 27 jQuery
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
Echarts实现多条折线可拖拽效果
Dec 19 Javascript
vue移动端的左右滑动事件详解
Jun 17 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分页显示制作详细讲解
2006/10/09 PHP
杏林同学录(四)
2006/10/09 PHP
Linux下 php5 MySQL5 Apache2 phpMyAdmin ZendOptimizer安装与配置[图文]
2008/11/18 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP MYSQL实现登陆和模糊查询两大功能
2016/02/05 PHP
javascript实现的listview效果
2007/04/28 Javascript
JS运行耗时操作的延时显示方法
2010/11/19 Javascript
原始XMLHttpRequest方法详情回顾
2013/11/28 Javascript
Node.js和PHP根据ip获取地理位置的方法
2014/03/14 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
JavaScript+CSS实现的可折叠二级菜单实例
2016/02/29 Javascript
Bootstrap每天必学之导航条(二)
2016/03/01 Javascript
JavaScript中利用构造器函数模拟类的方法
2017/02/16 Javascript
jQuery validate 验证radio实例
2017/03/01 Javascript
移动端触屏幻灯片图片切换插件idangerous swiper.js
2017/04/10 Javascript
JavaScript仿微信打飞机游戏
2020/07/05 Javascript
webpack学习教程之publicPath路径问题详解
2017/06/17 Javascript
微信小程序switch组件使用详解
2018/01/31 Javascript
利用百度echarts实现图表功能简单入门示例【附源码下载】
2019/06/10 Javascript
Vue实现数据表格合并列rowspan效果
2020/11/30 Javascript
javascript canvas检测小球碰撞
2020/04/17 Javascript
[02:14]2016国际邀请赛中国区预选赛Ehome晋级之路
2016/07/01 DOTA
编程语言Python的发展史
2014/09/26 Python
详解Python实现按任意键继续/退出的功能
2016/08/19 Python
requests和lxml实现爬虫的方法
2017/06/11 Python
利用pandas读取中文数据集的方法
2018/07/25 Python
python的concat等多种用法详解
2018/11/28 Python
HTML5的hidden属性兼容老浏览器的方法
2014/04/23 HTML / CSS
创业计划书的内容步骤和要领
2014/01/04 职场文书
个人自我剖析材料
2014/02/07 职场文书
人事专员工作职责
2014/02/22 职场文书
费用申请报告范文
2015/05/15 职场文书
《秋思》教学反思
2016/02/23 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
浅谈什么是SpringBoot异常处理自动配置的原理
2021/06/21 Java/Android
mysql 获取时间方式
2022/03/20 MySQL