亲宝软件园·资讯

展开

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

_west 人气:3

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

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

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

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

共享数据

多个路由共享数据,可以使用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
  })
 },
}

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

保留浏览位置

从故事编辑页回到故事列表页,我们希望可以保存之前浏览的位置。思路也很简单,进入编辑页时保存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. 《滚动行为》

加载全部内容

相关教程
猜你喜欢
用户评论