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本身有一套完善的防止重复提交表单的 ...
随机推荐
- google浏览器中 查看记住的账号和密码
对于一个有“健忘症”的人来说,密码形同虚设..设置了就忘记,每次登陆都要重新设置密码... 然后,无意中发现,谷歌浏览器点过一次记住密码后,竟然可以明文查看账号和密码!! 步骤: 1.打开谷歌浏览器, ...
- 【hdu 6336】 Matrix from Arrays
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 找个规律会发现 M[i][j] = M[i-2*L][j] = M[i][j-2*L] 先预处理出来(1,1)-(2L,2L)这个矩 ...
- NYIST 1083 美丽的校园
美丽的校园时间限制:1000 ms | 内存限制:65535 KB难度:3 描述 美丽的校园需要大家维护,作为南工学子,当然有责任! 在计科系门前有n棵树,按一行排列在计科系楼前面,它们在一条直线上, ...
- mysql Access denied for user 'root'@'localhost' (using password: YES)
[现象说明] C/S程序远程訪问正常,本地訪问报下面异常 MySql.Data.MySqlClient.MySqlException (0x80004005): Authentication to h ...
- 火狐浏览器中加入httprequest的方法
今天弄了非常久就才装好. 以下的样例是以 window为样例的,mac的也是这样, 下载好火狐之后点击右上角的菜单 想到httprequest是个插件,就点击附加组件 搜索出来之后找到httprequ ...
- 石子合并(区间dp)
石子合并(一) 时间限制:1000 ms | 内存限制:65535 KB 难度:3 描写叙述 有N堆石子排成一排,每堆石子有一定的数量.现要将N堆石子并成为一堆.合并的过程仅仅能每次将相邻 ...
- bzj1106: [POI2007]立方体大作战tet
比较玄幻的题目. 考虑两个不同的元素 假设位置是 a...a...b...b... 那么不需要通过交换ab来消除ab,各自弄就行 若是 a...b...b...a... 那也没必要交换,先把b消掉就好 ...
- SQL Server loop - how do I loop through a set of records
SQL Server loop - how do I loop through a set of records By using T-SQL and cursors like this : DECL ...
- SYN-Flood防御方法之一Synproxy
SYN-Flood攻击: 攻击者发送大量的SYN给服务器. 服务器必须针对每一个SYN请求回送一个SYN-ACK 应答包,此时服务器就必须保持一条半开放的连接,直到接收到一个对应的ACK应答包为止. ...
- 从git源码安装zabbix-agent
从网上随便找了几个image,都是从svn下载的代码,根本跑不了,于是自己重新做了个,从git上拿的源码,只是build出来的image有点大,有时间再优化了 Dockerfile FROM cent ...