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

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

这三类页面都共享一个完整的数据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
  })
 },
}

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

• 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. 《滚动行为》

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

最新评论