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 相关文章推荐
CSS常用网站布局实例
Apr 03 Javascript
利用onresize使得div可以随着屏幕大小而自适应的代码
Jan 15 Javascript
jquery复选框checkbox实现删除前判断
Apr 20 Javascript
jQuery中is()方法用法实例
Jan 06 Javascript
AngularJS使用ngMessages进行表单验证
Dec 27 Javascript
浅析jquery unbind()方法移除元素绑定的事件
May 24 Javascript
浅谈addEventListener和attachEvent的区别
Jul 14 Javascript
jQuery中show与hide方法用法示例
Sep 16 Javascript
js实现html table 行,列锁定的简单实例
Oct 13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
Feb 20 Javascript
js实现悬浮窗效果(支持拖动)
Mar 09 Javascript
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
在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中多维数组的foreach遍历示例
2014/06/13 PHP
PHP中实现中文字串截取无乱码的解决方法
2018/05/29 PHP
thinkPHP框架实现多表查询的方法
2018/06/14 PHP
jquery 学习之二 属性相关
2010/11/23 Javascript
基于jquery实现的类似百度搜索的输入框自动完成功能
2011/08/23 Javascript
javascript学习笔记(十一) 正则表达式介绍
2012/06/20 Javascript
这些年、我收集的JQuery代码小结
2012/08/01 Javascript
javascript 10进制和62进制的相互转换
2014/07/31 Javascript
Node.js中使用mongoskin操作mongoDB实例
2014/09/28 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
JavaScript实现图片滑动切换的代码示例分享
2016/03/06 Javascript
jQueryUI中的datepicker使用方法详解
2016/05/25 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
angular-ngSanitize模块-$sanitize服务详解
2017/06/13 Javascript
vue 父组件通过$refs获取子组件的值和方法详解
2019/11/07 Javascript
浅谈JavaScript中this的指向更改
2020/07/28 Javascript
Python最长公共子串算法实例
2015/03/07 Python
用Python编写一个每天都在系统下新建一个文件夹的脚本
2015/05/04 Python
Python中的with语句与上下文管理器学习总结
2016/06/28 Python
python保存网页图片到本地的方法
2018/07/24 Python
windows系统中Python多版本与jupyter notebook使用虚拟环境的过程
2019/05/15 Python
详解python实现数据归一化处理的方式:(0,1)标准化
2019/07/17 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
详解有关PyCharm安装库失败的问题的解决方法
2020/02/02 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
Python+OpenCV图像处理——实现轮廓发现
2020/10/23 Python
python搜索算法原理及实例讲解
2020/11/18 Python
HTML5 canvas基本绘图之填充样式实现
2016/06/27 HTML / CSS
德国街头和运动文化高品质商店:BSTN Store
2017/08/26 全球购物
泰国网上购物:Shopee泰国
2018/09/14 全球购物
自动化毕业生专业自荐书范文
2014/02/04 职场文书
干部作风建设年活动剖析材料
2014/10/23 职场文书
订货会主持词
2015/07/01 职场文书
2015年国培研修感言
2015/08/01 职场文书
Win10此设备不支持接收Miracast无法投影的解决方法
2022/07/07 数码科技