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 相关文章推荐
Jquery操作Select 简单方便 一个js插件搞定
Nov 12 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
js识别不同浏览器基于userAgent做判断
Jul 29 Javascript
Javascript的表单验证-初识正则表达式
Mar 18 Javascript
JS获取当前使用的浏览器名字以及版本号实现方法
Aug 19 Javascript
Ubuntu 16.04 64位中搭建Node.js开发环境教程
Oct 19 Javascript
JavaScript输入框字数实时统计更新
Jun 17 Javascript
jquery写出PC端轮播图实例
Jan 26 jQuery
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
layui时间控件选择时间范围的实现方法
Sep 28 Javascript
微信小程序scroll-view的滚动条设置实现
Mar 02 Javascript
vue项目中使用bpmn-自定义platter的示例代码
May 11 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下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
PHP实现UTF-8文件BOM自动检测与移除实例
2014/11/05 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
jQuery ajax dataType值为text json探索分享
2013/09/23 Javascript
ExtJS自定义主题(theme)样式详解
2013/11/18 Javascript
jQuery中事件对象e的事件冒泡用法示例介绍
2014/04/25 Javascript
javascript中一些util方法汇总
2015/06/10 Javascript
JavaScript实现对下拉列表值进行排序的方法
2015/07/15 Javascript
JS响应鼠标点击实现两个滑块区间拖动效果
2015/10/26 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
nodejs后台集成ueditor富文本编辑器的实例
2017/07/11 NodeJs
详解ES6之async+await 同步/异步方案
2017/09/19 Javascript
微信小程序之多文件下载的简单封装示例
2018/01/29 Javascript
Electron vue的使用教程图文详解
2019/07/05 Javascript
vue 实现路由跳转时更改页面title
2019/11/05 Javascript
Vue.js watch监视属性知识点总结
2019/11/11 Javascript
Element Rate 评分的使用方法
2020/07/27 Javascript
Vue实现指令式动态追加小球动画组件的步骤
2020/12/18 Vue.js
[52:06]FNATIC vs NIP 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
python获取从命令行输入数字的方法
2015/04/29 Python
Python基于生成器迭代实现的八皇后问题示例
2018/05/23 Python
Python 实现「食行生鲜」签到领积分功能
2018/09/26 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
德国体育用品网上商店:SC24.com
2016/08/01 全球购物
中国最大的团购网站:聚划算
2016/09/21 全球购物
L’urv官网:精品女性运动服品牌
2019/07/07 全球购物
农行实习自我鉴定
2013/09/22 职场文书
大学生毕业自我鉴定范文
2014/02/03 职场文书
客服专员岗位职责
2014/02/28 职场文书
社区党员志愿服务活动方案
2014/08/18 职场文书
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
Python 数据可视化工具 Pyecharts 安装及应用
2022/04/20 Python
nginx日志格式分析和修改
2022/04/28 Servers
Vue组件化(ref,props, mixin,.插件)详解
2022/05/15 Vue.js