之前开发了一个单页面应用，按照深度，分为三层：目录页、一级子页（标签页、故事页等）、二级子页（故事编辑页）。
这三类页面都共享一个完整的数据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. 《滚动行为》
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持北冥有鱼。
您可能感兴趣的文章:
- Vue项目全局配置页面缓存之按需读取缓存的实现详解
- vue项目中实现缓存的最佳方案详解
- 详解Vue中组件的缓存
- vue项目动态设置页面title及是否缓存页面的问题
- vue 详情跳转至列表页实现列表页缓存
- 关于vue里页面的缓存详解
