详解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中的noscript元素属性位置及作用介绍
Apr 11 Javascript
Jquery each方法跳出循环,并获取返回值(实例讲解)
Dec 12 Javascript
extjs_02_grid显示本地数据、显示跨域数据
Jun 23 Javascript
JQuery实现动态表格点击按钮表格增加一行
Aug 24 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
js数组常用操作方法小结(增加,删除,合并,分割等)
Aug 02 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
vue+axios新手实践实现登陆的示例代码
Jun 06 Javascript
ng-repeat指令在迭代对象时的去重方法
Oct 02 Javascript
Vue插值、表达式、分隔符、指令知识小结
Oct 12 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
关于vue 结合原生js 解决echarts resize问题
Jul 26 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP 裁剪图片成固定大小代码方法
2009/09/09 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php实现数组筛选奇数和偶数示例
2014/04/11 PHP
如何在旧的PHP系统中使用PHP 5.3之后的库
2015/12/02 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
php字符串过滤strip_tags()函数用法实例分析
2019/06/24 PHP
PHP常用字符串函数用法实例总结
2020/06/04 PHP
js每次Title显示不同的名言
2008/09/25 Javascript
javascript 读取图片文件的大小
2009/06/25 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
readonly和disabled属性的区别
2015/07/26 Javascript
详解JavaScript UTC时间转换方法
2016/01/07 Javascript
JavaScript学习笔记整理之引用类型
2016/01/22 Javascript
js以及jquery实现手风琴效果
2020/04/17 Javascript
vue实现一个移动端屏蔽滑动的遮罩层实例
2017/06/08 Javascript
JS实现浏览上传文件的代码
2017/08/23 Javascript
JS+canvas动态绘制饼图的方法示例
2017/09/12 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
微信小程序实现通过双向滑动缩放图片大小的方法
2018/12/30 Javascript
详解react-refetch的使用小例子
2019/02/15 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
浅析Python中的多重继承
2015/04/28 Python
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
澳大利亚在线消费电子产品商店:TobyDeals
2020/01/05 全球购物
优秀应届毕业生自荐信
2013/11/16 职场文书
关于人生的感言
2014/01/17 职场文书
实习单位评语
2014/04/26 职场文书
大专生找工作自荐书
2014/06/10 职场文书
个性车贴标语
2014/06/24 职场文书
2015年食品安全工作总结
2015/05/15 职场文书
机器人瓦力观后感
2015/06/12 职场文书
vue完美实现el-table列宽自适应
2021/05/08 Vue.js