详解vue-router数据加载与缓存使用总结


Posted in Javascript onOctober 29, 2018

之前开发了一个单页面应用,按照深度,分为三层:目录页、一级子页(标签页、故事页等)、二级子页(故事编辑页)。

这三类页面都共享一个完整的数据model,从上级页面进入下一级页面时,能够加载相应数据;回到上一级时,数据有更新。举个栗子,从故事页点击“编辑”按钮,进入故事编辑页则默认填充点击的“编辑”按钮所对应的故事数据;而当在故事编辑页更新数据,返回到故事页时,刚刚更新的信息也能在故事页展示。

详解vue-router数据加载与缓存使用总结

对于这项需求,我们需要解决如下几个问题:

  • 三层页面共享数据;
  • 进入或退回当前路由时,数据更新;
  • 对于故事列表页,返回时保留之前浏览位置;

本文后面内容,将对如上问题一一提出解决方案。

共享数据

多个路由共享数据,可以使用vuex做数据中心,由于需求对数据处理并不复杂,为了简便就使用window全局对象作为路由间传递数据的工具。
核心数据我们可以设计为如下结构,以故事为例:

window.profileData = {
 storyList: [{
  content: 'xxx',
  type: 0,
  picList: [...],
 }, ...],
 description: {...}, // 其他字段数据
}

注意到,如果需要更新storyList,则应该使用能够被检测到的方法,如push, splice等。

数据更新与缓存

数据更新与缓存大致有两种方案:

第一种,利用vue-router的导航守卫(见文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html),主要使用路由组件内导航 beforeRouteEnter 和 beforeRouteLeave;

第二种,在路由组件中监听$route,每次路由变化就会调用其中方法加载数据,需要注意的是第一次进入路由组件$route的监听不会触发,我们需要在mounted方法中调用相同加载数据的方法;

我们在代码中使用的是方法一,以故事列表进入到故事编辑页为例,从列表传递index给编辑页,利用beforeRouteEnter进入路由时就加载新的数据。

编辑页中关键代码,即加载数据、更新本地共享数据:

export default {
 // 编辑页中, 进入路由前加载数据
 beforeRouteEnter(to, from, next) {
  next(vm => {
   const index = vm.$route.params.storyIndex
   vm.storyIndex = index
   vm.storyData = window.profile.storyList[index]
  })
 },

 methods: {
  // 提交成功后,更新本地共享数据
  submit() {
   Adapter.post('...').then(result => {
    window.profile.storyList.splice(this.storyIndex, 1, result)
   }) 
  },
 },
}

列表页中关键代码,即返回时更新数据:

export default {
 beforeRouteEnter(to, from, next) {
  next(vm => {
   vm.storyList = window.profileData.storyList
  })
 },
}

这部分需要注意的有两点:

  • beforeRouteEnter中无法调用组件实例,因为执行时还在组件生命周期的beforeCreate之前,而其中的next方法是在组件mounted之后执行,如需引用可在next方法中,引用其参数,该参数就是组件实例;
  • 如果发现你的next方法无法执行,请升级到2.6+版本,之前的版本这部分有些问题;

保留浏览位置

从故事编辑页回到故事列表页,我们希望可以保存之前浏览的位置。思路也很简单,进入编辑页时保存scrollTop,返回时scrollTo即可。而且vue-router对象有属性可以实现这个功能,这就简洁多了。

由于我们过渡动画中间,有将路由组件定位成fixed的操作,所以,动画结束后再手动滚动到目标位置:

new VueRouter({
 routes,
 scrollBehavior (to, from, savedPosition) {
  const y = savedPosition && savedPosition.y || 0
  setTimeout(() => { window.scrollTo(0, y) }, 300)
 }
})

总结

vue-router我们在偏B端的场景中经常用到,尤其是分步骤填写表单的页面。前期在使用过程中总是不太顺畅,摸索几次后,最终找到比较“舒适”的使用方法,索性就梳理成文。
当然,还有其他一些特殊场景的用法,这里暂时不说了,等项目中用过后再另起一文,继续研究。

参考文献

1. 《官方文档》
2. 《滚动行为》

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

Javascript 相关文章推荐
Javascript 表单之间的数据传递代码
Dec 04 Javascript
js 表格隔行颜色
Dec 02 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
上传文件返回的json数据会被提示下载问题解决方案
Dec 03 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
jquery+json实现分页效果
Mar 07 Javascript
JS创建事件的三种方法(实例代码)
May 12 Javascript
w3c编程挑战_初级脚本算法实战篇
Jun 23 Javascript
微信小程序之滚动视图容器的实现方法
Sep 26 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 Javascript
HTML+VUE分页实现炫酷物联网大屏功能
May 27 Vue.js
vue mounted 调用两次的完美解决办法
Oct 29 #Javascript
Electron中实现大文件上传和断点续传功能
Oct 28 #Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
Oct 28 #Javascript
Js 利用正则表达式和replace函数获取string中所有被匹配到的文本(推荐)
Oct 28 #Javascript
深入浅析javascript函数中with
Oct 28 #Javascript
微信小程序动画(Animation)的实现及执行步骤
Oct 28 #Javascript
又拍云 Node.js 实现文件上传、删除功能
Oct 28 #Javascript
You might like
PHP strtok()函数的优点分析
2010/03/02 PHP
利用PHPExcel实现Excel文件的写入和读取
2017/04/26 PHP
拖拉表格的JS函数
2008/11/20 Javascript
JavaScript实现基于Cookie的存储类实例
2015/04/10 Javascript
node.js中格式化数字增加千位符的几种方法
2015/07/03 Javascript
浅谈JS原型对象和原型链
2016/03/02 Javascript
浅析Javascript中bind()方法的使用与实现
2016/04/29 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
iview table高度动态设置方法
2018/03/14 Javascript
vue 使用自定义指令实现表单校验的方法
2018/08/28 Javascript
PWA介绍及快速上手搭建一个PWA应用的方法
2019/01/27 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
ES6 class类链式继承,实例化及react super(props)原理详解
2020/02/15 Javascript
Javascript柯里化实现原理及作用解析
2020/10/22 Javascript
python开发的小球完全弹性碰撞游戏代码
2013/10/15 Python
Python计算程序运行时间的方法
2014/12/13 Python
Python双精度浮点数运算并分行显示操作示例
2017/07/21 Python
python的多重继承的理解
2017/08/06 Python
让你的Python代码实现类型提示功能
2019/11/19 Python
Python实现结构体代码实例
2020/02/10 Python
django执行数据库查询之后实现返回的结果集转json
2020/03/31 Python
Python把图片转化为pdf代码实例
2020/07/28 Python
filter使用python3代码进行迭代元素的实例详解
2020/12/03 Python
纯CSS3实现滚动的齿轮动画效果
2014/06/05 HTML / CSS
SQL语言面试题
2013/08/27 面试题
水污染治理专业毕业生推荐信
2013/11/14 职场文书
岗位标兵事迹材料
2014/05/17 职场文书
小学生2014国庆节演讲稿:祖国在我心中
2014/09/21 职场文书
实训报告范文大全
2014/11/04 职场文书
2014年测量员工作总结
2014/12/12 职场文书
2015年幼儿园中班下学期工作总结
2015/05/22 职场文书
2015年小学语文工作总结
2015/05/25 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
python b站视频下载的五种版本
2021/05/27 Python
Go语言怎么使用变长参数函数
2022/07/15 Golang