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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
如何通过javascript操作web控件的自定义属性
Nov 25 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
使用bootstrap3开发响应式网站
May 12 Javascript
jQuery学习心得总结(必看篇)
Jun 10 Javascript
浅析JavaScript中var that=this
Feb 17 Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 Javascript
使用async、enterproxy控制并发数量的方法详解
Jan 02 Javascript
解决Vue 通过下表修改数组,页面不渲染的问题
Mar 08 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
js实现滚动条自动滚动
Dec 13 Javascript
使用js原生实现年份轮播选择效果实例
Jan 12 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缓存类代码(附详细说明)
2011/06/09 PHP
用js实现预览待上传的本地图片
2007/03/15 Javascript
扩展easyui.datagrid,添加数据loading遮罩效果代码
2010/11/02 Javascript
父节点获取子节点的字符串示例代码
2014/02/26 Javascript
jquery判断浏览器后退时候弹出消息的方法
2014/08/11 Javascript
node.js中的buffer.Buffer.isEncoding方法使用说明
2014/12/14 Javascript
JavaScript调试工具汇总
2014/12/23 Javascript
jquery ui resize 中border-box的bug修正
2015/04/26 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
JS 获取HTML标签内的子节点的方法
2016/09/21 Javascript
node.js请求HTTPS报错:UNABLE_TO_VERIFY_LEAF_SIGNATURE\的解决方法
2016/12/18 Javascript
jQuery EasyUI之验证框validatebox实例详解
2017/04/10 jQuery
JavaScript实现反转字符串的方法详解
2017/04/27 Javascript
JavaScript实现正则去除a标签并保留内容的方法【测试可用】
2018/07/18 Javascript
jqGrid表格底部汇总、合计行footerrow处理
2019/08/21 Javascript
Vue.directive 实现元素scroll逻辑复用
2019/11/29 Javascript
基于JS判断对象是否是数组
2020/01/10 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
js观察者模式的弹幕案例
2020/11/23 Javascript
[01:24:09]Ti4 冒泡赛第二轮DK vs C9 1
2014/07/14 DOTA
python实现合并两个数组的方法
2015/05/16 Python
python 自动化将markdown文件转成html文件的方法
2016/09/23 Python
Python内置模块hashlib、hmac与uuid用法分析
2018/02/12 Python
python实现守护进程、守护线程、守护非守护并行
2018/05/05 Python
Python  unittest单元测试框架的使用
2018/09/08 Python
Python爬虫之正则表达式的使用教程详解
2018/10/25 Python
python按修改时间顺序排列文件的实例代码
2019/07/25 Python
PyQt5基本控件使用详解:单选按钮、复选框、下拉框
2019/08/05 Python
django基础学习之send_mail功能
2019/08/07 Python
下载官网python并安装的步骤详解
2019/10/12 Python
亚洲独特体验旅游专家:eOasia
2018/08/15 全球购物
毕业生自荐信
2013/12/14 职场文书
献爱心标语
2014/06/21 职场文书
校长师德表现自我评价
2015/03/04 职场文书
盗窃罪辩护词范文
2015/05/21 职场文书
教你如何使用Python Tkinter库制作记事本
2021/06/10 Python