详解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 相关文章推荐
js加强的经典分页实例
Mar 15 Javascript
原生js的弹出层且其内的窗口居中
May 14 Javascript
javascript显示系统当前时间代码
Dec 29 Javascript
bootstrapValidator 重新启用提交按钮的方法
Feb 20 Javascript
AngularJs实现聊天列表实时刷新功能
Jun 15 Javascript
AngularJS中ng-class用法实例分析
Jul 06 Javascript
js动态设置select下拉菜单的默认选中项实例
Aug 21 Javascript
小程序scroll-view组件实现滚动的示例代码
Sep 20 Javascript
JS闭包经典实例详解
Dec 20 Javascript
vue缓存的keepalive页面刷新数据的方法
Apr 23 Javascript
三步实现ionic3点击退出app程序
Sep 17 Javascript
在vue中给后台接口传的值为数组的格式代码
Nov 12 Javascript
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 什么是PEAR?(第二篇)
2009/03/19 PHP
为PHP5.4开启Zend OPCode缓存
2014/12/26 PHP
PHP使用in_array函数检查数组中是否存在某个值
2015/03/25 PHP
php简单生成随机数的方法
2015/07/30 PHP
PHP文件上传、客户端和服务器端加限制、抓取错误信息、完整步骤解析
2017/01/12 PHP
php中时间函数date及常用的时间计算
2017/05/12 PHP
javascript实现焦点滚动图效果 具体方法
2013/06/24 Javascript
浅析JavaScript中的CSS属性及命名规范
2013/11/28 Javascript
Jquery中CSS选择器用法分析
2015/02/10 Javascript
javascript实现不同颜色Tab标签切换效果
2016/04/27 Javascript
基于Node.js的WebSocket通信实现
2017/03/11 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
详解Vuex管理登录状态
2017/11/13 Javascript
Angular6 发送手机验证码按钮倒计时效果实现方法
2019/01/08 Javascript
ES6 新增的创建数组的方法(小结)
2019/08/01 Javascript
这15个Vue指令,让你的项目开发爽到爆
2019/10/11 Javascript
jstree中的checkbox默认选中和隐藏示例代码
2019/12/29 Javascript
node.js如何根据URL返回指定的图片详解
2020/10/21 Javascript
[01:32]TI珍贵瞬间系列(一)
2020/08/26 DOTA
python中的列表推导浅析
2014/04/26 Python
python实现简单聊天应用 python群聊和点对点均实现
2017/09/14 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
Python使用sort和class实现的多级排序功能示例
2018/08/15 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
numpy.linspace函数具体使用详解
2019/05/27 Python
关于Python形参打包与解包小技巧分享
2019/08/24 Python
python实现获取单向链表倒数第k个结点的值示例
2019/10/24 Python
python日志通过不同的等级打印不同的颜色(示例代码)
2021/01/13 Python
CSS中的字体大小设置属性总结
2016/05/24 HTML / CSS
bareMinerals官网:矿物质化妆品和护肤品
2018/02/04 全球购物
莫斯科珠宝厂官方网站:Miuz
2020/09/19 全球购物
出纳岗位职责
2013/11/09 职场文书
校本教研工作制度
2014/01/22 职场文书
采购部经理岗位职责
2014/02/10 职场文书
写得不错的求职信范文
2014/07/11 职场文书
超市周年庆活动方案
2014/08/16 职场文书