Vue 实现前进刷新,后退不刷新的效果
需求一:
在一个列表页中,第一次进入的时候,请求获取数据。
点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。
也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。
解决方案
假设列表页为 list.vue
,详情页为 detail.vue
,这两个都是子组件。
我们在 keep-alive
添加列表页的名字,缓存列表页。
然后在列表页的 created
函数里添加 ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。
这样就可以解决问题了。
需求二:
在需求一的基础上,再加一个要求:可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。
这样就不需要在列表页的 created
函数里用 ajax 来请求数据了,统一放在 App.vue
里来处理。
触发请求数据有两个条件:
从其他页面(除了详情页)进来列表时,需要请求数据。
从详情页返回到列表页时,如果详情页
meta
属性中的isRefresh
为true
,也需求重新请求数据。
当我们在详情页中删除了对应的列表项时,就可以将详情页 meta
属性中的 isRefresh
设为 true
。这时再返回到列表页,页面会重新刷新
擦考:https://segmentfault.com/a/1190000019414890
Vue 实现前进刷新,后退不刷新的效果的更多相关文章
- vue单页应用前进刷新后退不刷新方案探讨
引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...
- vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)
keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...
- Vue 页面 前进刷新 后退不刷新(keepAlive)
前言 遇到这一个个问题 需要是这样的 Vue里面的不刷新问题 页面分为: A 主页 B列表页 C 详情页 A beforeRouteLeave 时设置 to.meta.keepAlive = ...
- vue 前进刷新后退不刷新
这边是router-view部门的写法: <keep-alive> <router-view v-if="$route.meta.keepAlive"/> ...
- 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新
目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...
- 玩转vue前进刷新,后退不刷新and按需刷新
大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...
- Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta
Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...
- 单页应用后退不刷新方案(vue & react)
引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...
- 防止刷新/后退引起的重复提交问题的Java Token代码,非Struts
贴子转自http://hi.baidu.com/bobylou,转之前并没有验证文章里的方法是不是有效,估计原作者把它放到blog之前应该做过测试了吧. Struts本身有一套完善的防止重复提交表单的 ...
随机推荐
- J2EE提高之知识清单
Oracle数据库 JDBC事务 Spring事务 SOA XML/JSON redis/memcached 反射,类加载,JVM 工具类:UML, Maven, 性能类:CPU监控,memary监控 ...
- SDWebImage源代码解析(二)
上一篇:SDWebImage源代码解析(一) 2.缓存 为了降低网络流量的消耗.我们都希望下载下来的图片缓存到本地.下次再去获取同一张图片时.能够直接从本地获取,而不再从远程server获取.这样做的 ...
- Android面试题集
前几天整理了Java面试题集合,今天再来整理下Android相关的面试题集合.假设你希望能得到最新的消息,能够关注https://github.com/closedevice/interview-ab ...
- 【Java基础】--再谈面向对象
面向对象总结 V1.0 2014.9.14 面向对象总结V2.0 2015.8.14 对照之前的J2SE总结,发现现在的似乎更加的注重联系,開始能把细节的东西都编制到知识网络里面,导图的图 ...
- tp中使用事务
是什么 事务是为了防止,多个操作,其中有失败,数据有部分被执行成功的时候使用的. 比如,银行,用户转账.张三钱扣了,结果李四钱还增加! 这个时候需要使用事务,确保张三钱扣了,李四的钱也增加,才真正的成 ...
- 内存问题检测神器:Valgrind
Linux下内存问题检测神器:Valgrind 在写大型C/C++工程时难免会发生内存泄漏现象,系统编程中一个重要的方面就是有效地处理与内存相关的问题.你的工作越接近系统,你就需要面对越多的内存问题. ...
- 常见DDOS攻击原理和防御
常见的DDOS攻击主要分为流量型攻击和cc攻击: 流量型攻击主要通过发送大量的非法报文侵占正常业务带宽 包括SYN Flood/ SYN-ACK Flood /ACK Flood/ FIN/RST F ...
- [JavaEE] Maven简介
转载自:百度 http://baike.baidu.com/view/336103.htm?fr=aladdin 一.简介 Maven是基于项目对象模型(POM),可以通过一小段描述信息来管理项目的构 ...
- lightshot截图工具的安装及使用
通常我们做PPT或者写博客难免要用到截图工具,而Windows自带的snippingtool启动有延迟也不够方便,QQ有截屏又需要联网及登录情况下,于是我想着在Chrome上搜一款清新简洁的截屏软件, ...
- 一种比较高级的方法也可以修改windows为默认启动系统
运行: sudo mv /etc/grub.d/30_os-prober /etc/grub.d/06_os-probersudo update-grub