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

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

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

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

• 三层页面共享数据；
• 进入或退回当前路由时，数据更新；
• 对于故事列表页，返回时保留之前浏览位置；

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

共享数据

多个路由共享数据，可以使用vuex做数据中心，由于需求对数据处理并不复杂，为了简便就使用window全局对象作为路由间传递数据的工具。
核心数据我们可以设计为如下结构，以故事为例：

window.profileData = {
    storyList: [{
        content: 'xxx',
        type: 0,
        picList: [...],
    }, ...],
    description: {...},    // 其他字段数据
}

注意到，如果需要更新storyList，则应该使用能够被检测到的方法，如push, splice等。

数据更新与缓存

数据更新与缓存大致有两种方案：
第一种，利用vue-router的导航守卫（见文档：https://router.vuejs.org/zh/g...），主要使用路由组件内导航 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.《滚动行为》