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 相关文章推荐
javascript实现PC网页里的拖拽效果
Mar 14 Javascript
jQuery动态加载css文件实现方法
Jun 15 Javascript
form表单转Json提交的方法(推荐)
Sep 23 Javascript
js 实现一些跨浏览器的事件方法详解及实例
Oct 27 Javascript
微信小程序加载更多 点击查看更多
Nov 29 Javascript
javascript构造函数以及原型对象的理解
Jan 13 Javascript
Vue的Class与Style绑定的方法
Sep 01 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 Javascript
javascript定时器的简单应用示例【控制方块移动】
Jun 17 Javascript
vue动态子组件的两种实现方式
Sep 01 Javascript
JS工厂模式开发实践案例分析
Oct 17 Javascript
在vue中使用eslint,配合vscode的操作
Nov 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脚本的10个技巧(2)
2006/10/09 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
display和visibility的区别示例介绍
2014/02/26 Javascript
JSON中双引号的轮回使用过程中一定要小心
2014/03/05 Javascript
jquery的each方法使用示例分享
2014/03/25 Javascript
基于JavaScript实现定时跳转到指定页面
2016/01/01 Javascript
微信小程序 后台https域名绑定和免费的https证书申请详解
2016/11/10 Javascript
Bootstrap基本组件学习笔记之缩略图(13)
2016/12/08 Javascript
简单实现JS上传图片预览功能
2017/04/14 Javascript
使用原生js写ajax实例(推荐)
2017/05/31 Javascript
AngularJs每天学习之总体介绍
2017/08/07 Javascript
微信小程序实现单选功能
2018/10/30 Javascript
JS实现根据数组对象的某一属性排序操作示例
2019/01/14 Javascript
jquery轻量级数字动画插件countUp.js使用详解
2019/10/17 jQuery
JS数组方法slice()用法实例分析
2020/01/18 Javascript
[46:48]DOTA2上海特级锦标赛A组小组赛#2 Secret VS CDEC第三局
2016/02/25 DOTA
在Linux下使用Python的matplotlib绘制数据图的教程
2015/06/11 Python
在windows下快速搭建web.py开发框架方法
2016/04/22 Python
Python 3.x 连接数据库示例(pymysql 方式)
2017/01/19 Python
Python基于WordCloud制作词云图
2019/11/29 Python
如何更改 pandas dataframe 中两列的位置
2019/12/27 Python
下载与当前Chrome对应的chromedriver.exe(用于python+selenium)
2020/01/14 Python
Tensorflow 模型转换 .pb convert to .lite实例
2020/02/12 Python
Python通过文本和图片生成词云图
2020/05/21 Python
Django解决frame拒绝问题的方法
2020/12/18 Python
在HTML5中如何使用CSS建立不可选的文字
2014/10/17 HTML / CSS
New Balance加拿大官方网站:运动鞋和健身服装
2018/11/19 全球购物
沙特阿拉伯电子产品和家用电器购物网站:Black Box
2019/07/24 全球购物
商场中秋节活动方案
2014/02/07 职场文书
遗体告别仪式主持词
2014/03/20 职场文书
2015年母亲节活动总结
2015/02/10 职场文书
工作时间证明
2015/06/15 职场文书
详解Nginx 被动检查服务器的存活状态
2021/10/16 Servers
一文了解Java动态代理的原理及实现
2022/07/07 Java/Android