需求一:

在一个列表页中,第一次进入的时候,请求获取数据。
点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。
也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。

解决方案

假设列表页为 list.vue,详情页为 detail.vue,这两个都是子组件。
我们在 keep-alive 添加列表页的名字,缓存列表页。
然后在列表页的 created 函数里添加 ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。
这样就可以解决问题了。

需求二:

在需求一的基础上,再加一个要求:可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。

这样就不需要在列表页的 created 函数里用 ajax 来请求数据了,统一放在 App.vue 里来处理。
触发请求数据有两个条件:

  1. 从其他页面(除了详情页)进来列表时,需要请求数据。

  2. 从详情页返回到列表页时,如果详情页 meta 属性中的 isRefresh 为 true,也需求重新请求数据。

当我们在详情页中删除了对应的列表项时,就可以将详情页 meta 属性中的 isRefresh 设为 true。这时再返回到列表页,页面会重新刷新

擦考:https://segmentfault.com/a/1190000019414890

Vue 实现前进刷新,后退不刷新的效果的更多相关文章

  1. vue单页应用前进刷新后退不刷新方案探讨

    引言 前端webapp应用为了追求类似于native模式的细致体验,总是在不断的在向native的体验靠拢:比如本文即将要说到的功能,native由于是多页应用,新页面可以启用一个的新的webview ...

  2. vue利用keep-alive/beforeRouteLeave前进刷新后退不刷新(缓存)

      keep-alive缓存 在vue中默认router-link进入页面组件都是不缓存的.对于数据不会更新的页面.可以使用keep-alive来缓存以提高性能. 在项目src/router/inde ...

  3. Vue 页面 前进刷新 后退不刷新(keepAlive)

    前言 遇到这一个个问题  需要是这样的 Vue里面的不刷新问题 页面分为: A 主页  B列表页  C 详情页 A  beforeRouteLeave 时设置 to.meta.keepAlive = ...

  4. vue 前进刷新后退不刷新

    这边是router-view部门的写法: <keep-alive> <router-view v-if="$route.meta.keepAlive"/> ...

  5. 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  6. [转] 2017-11-20 发布 另辟蹊径:vue单页面,多路由,前进刷新,后退不刷新

    目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

  7. 玩转vue前进刷新,后退不刷新and按需刷新

    大白萝卜小课堂开讲了!带你玩转vue前进后退按需刷新! 用vue做后台管理项目,特别是有列表页.列表数据详情页.列表数据修改页功能的码友们,几乎都被vue前进后退都刷新的逻辑坑过,本萝卜更是! 萝卜的 ...

  8. Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta

    Vue 实现前进刷新,后退不刷新的效果 玩转vue-router里的meta. 需求一: 在一个列表页中,第一次进入的时候,请求获取数据. 点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷 ...

  9. 单页应用后退不刷新方案(vue & react)

    引言 前进刷新,后退不刷新,是一个类似app页面的特点,要在单页web应用中做后退不刷新,却并非一件易事. 为什么麻烦 spa的渲染原理(以vue为例):url的更改触发onHashChange/pu ...

  10. 防止刷新/后退引起的重复提交问题的Java Token代码,非Struts

    贴子转自http://hi.baidu.com/bobylou,转之前并没有验证文章里的方法是不是有效,估计原作者把它放到blog之前应该做过测试了吧. Struts本身有一套完善的防止重复提交表单的 ...

随机推荐

  1. Python for json

    # Json- json格式是一个键值对形式的数据集 - key:字符串 - value:字符串,数字,列表,json - json使用大括号包裹 - 键值对直接用逗号隔开 - json和Python ...

  2. MVC笔记(一)

    1 MVC介绍 MVC是一个编程思想. 是一种设计模式 思想: 将一个功能分解成3个部分, M: Model (模型) 处理数据相关的逻辑 V: View (视图) 显示页面 C: Controlle ...

  3. JAVA基础总结【面试】

    前言 近间陆续面试了不少的求职的前(JAVA).后(WEB)端开发人员,包括实习生.应届毕业生.一两年工作经验的.也有三四年工作经验的,也算见过了比较多的开发人员,想在这里做个总结,本次主要讲一讲面试 ...

  4. nodejs-循环

    for循环 for(var key in object){ consol.log('wor' : key); } 来自为知笔记(Wiz)

  5. spring的启动过程就是创建ioc容器的过程

    1. spring简介 spring的最基本的功能就是创建对象及管理这些对象之间的依赖关系,实现低耦合.高内聚.还提供像通用日志记录.性能统计.安全控制.异常处理等面向切面的能力,还能帮我们管理最头疼 ...

  6. swift菜鸟入门视频教程-09-类和结构体

    本人自己录制的swift菜鸟入门,欢迎大家拍砖,有什么问题能够在这里留言. 主要内容: 类和结构体对照 结构体和枚举是值类型 类是引用类型 类和结构体的选择 集合(collection)类型的赋值与复 ...

  7. 探索Android调用系统的分享功能

    非常多的应用为了应用的推广和传播都会使用"分享"的功能,点击分享button.就能将想要分享的内容或者图片分享至QQ空间.微博.微信朋友圈等实现了分享功能的应用.这篇文章主要是为了 ...

  8. 英语发音规则---R字母

    英语发音规则---R字母 一.总结 一句话总结: 1.在词首和词中时,字母r常读作摩擦辅音/r/? red /red/ n. 红色 ruler /'ruːlə/ n. 尺:统治者 rub /rʌb/ ...

  9. javascript系列-class12.事件

    1.默认行为          什么是默认行为:默认行为就是浏览器自己触发的事件.比如:a链接的跳转,form提交时的跳转,鼠标右键跳转:   oncontexmenu当点击右键菜单的时候:   re ...

  10. ASP.net 中 OutputCache 指令各个参数的作用

    使用@ OutputCache指令 使用@ OutputCache指令,能够实现对页面输出缓存的一般性需要.@ OutputCache指令在ASP.NET页或者页中包含的用户控件的头部声明.这种方式非 ...