Vue 实现前进刷新后退不刷新的效果


Posted in Javascript onJune 14, 2019

需求一:

在一个列表页中,第一次进入的时候,请求获取数据。

点击某个列表项,跳到详情页,再从详情页后退回到列表页时,不刷新。

也就是说从其他页面进到列表页,需要刷新获取数据,从详情页返回到列表页时不要刷新。

解决方案在 app.vue 设置:

<keep-alive include="list">
<router-view/>
</keep-alive>

假设列表页为 list.vue ,详情页为 detail.vue ,这两个都是子组件。

我们在 keep-alive 添加列表页的名字,缓存列表页。

然后在列表页的 created 函数里添加ajax请求,这样只有第一次进入到列表页的时候才会请求数据,当从列表页跳到详情页,再从详情页回来的时候,列表页就不会刷新。

这样就可以解决问题了。

需求二:

在需求一的基础上,再加一个要求:

可以在详情页中删除对应的列表项,这时返回到列表页时需要刷新重新获取数据。

我们可以在路由配置文件上对 detail.vue 增加一个 meta 属性。

{
  path:'/detail',
  name:'detail',
  component:() => import('../view/detail.vue'),
  meta:{ isRefresh:true }
}

这个 meta 属性,可以在详情页中通过 this.$route.meta.isRefresh 来读取和设置。 设置完这个属性,还要在 App.vue 文件里设置 watch 一下 $route 属性。

watch:{
  $route(to, from) {
    const fname = from.name
    const tname = to.name
    if (from.meta.isRefresh || (fname != 'detail' && tname == 'list')) {
      // 在这里重新请求数据
      from.meta.isRefresh = false
    }
  }
}

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

触发请求数据有两个条件:

  1. 从其他页面(除了详情页)进来列表时,需要请求数据。
  2. 从详情页返回到列表页时,如果详情页 meta 属性中的 isRefresh 为 true ,也需求重新请求数据。

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
强制设为首页代码
Jun 19 Javascript
tbody元素支持嵌套的注意方法
Mar 24 Javascript
简单的无缝滚动程序-仅几行代码
May 08 Javascript
cnblogs csdn 代码运行框实现代码
Nov 02 Javascript
jQuery获取css z-index在各种浏览器中的返回值
Sep 15 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
学习JavaScript设计模式之迭代器模式
Jan 19 Javascript
JavaScript正则表达式匹配 div  style标签
Mar 15 Javascript
JSON字符串和JSON对象相互转化实例详解
Jan 05 Javascript
js实现简单的选项卡效果
Feb 23 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
深入详解JS函数的柯里化
Jun 09 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 #Javascript
移动端底部导航固定配合vue-router实现组件切换功能
Jun 13 #Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 #Javascript
vue路由插件之vue-route
Jun 13 #Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 #Javascript
详解vuex之store源码简单解析
Jun 13 #Javascript
vue store之状态管理模式的详细介绍
Jun 13 #Javascript
You might like
PHP学习之PHP表达式
2006/10/09 PHP
基于PHP输出缓存(output_buffering)的深入理解
2013/06/13 PHP
PHP实现链式操作的核心思想
2015/06/23 PHP
常用PHP封装分页工具类
2017/01/14 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
JQuery的Alert消息框插件使用介绍
2010/10/09 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
浅谈几种常用的JS类定义方法
2016/06/08 Javascript
jQuery使用正则表达式替换dom元素标签用法示例
2017/01/16 Javascript
JavaScript数据结构与算法之二叉树添加/删除节点操作示例
2019/03/01 Javascript
如何使用JavaScript实现栈与队列
2019/06/24 Javascript
微信小程序从注册账号到上架(图文详解)
2019/07/17 Javascript
基于JS抓取某高校附近共享单车位置 使用web方式展示位置变化代码实例
2019/08/27 Javascript
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
[37:35]DOTA2上海特级锦标赛A组资格赛#1 Secret VS MVP.Phx第二局
2016/02/25 DOTA
Python实现将数据库一键导出为Excel表格的实例
2016/12/30 Python
python库lxml在linux和WIN系统下的安装
2018/06/24 Python
python实现多层感知器
2019/01/18 Python
ipython和python区别详解
2019/06/26 Python
pytorch在fintune时将sequential中的层输出方法,以vgg为例
2019/08/20 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python子进程subpocess原理及用法解析
2020/07/16 Python
CSS3实现银灰色动画效果的导航菜单代码
2015/09/01 HTML / CSS
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
英国领先的新鲜松露和最好的松露产品供应商:TruffleHunter
2019/08/26 全球购物
高中生自我鉴定范文
2013/10/30 职场文书
医学类个人求职信范文
2014/02/05 职场文书
护士毕业生自我鉴定
2014/02/08 职场文书
医院标语大全
2014/06/23 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
学习教师敬业奉献模范事迹材料思想汇报
2014/09/19 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
软件项目经理岗位职责
2015/04/01 职场文书
读《钢铁是怎样炼成的》有感:百炼方成钢
2019/11/05 职场文书
Pygame Time时间控制的具体使用详解
2021/11/17 Python