详解vue-router数据加载与缓存使用总结 - 行业资讯 - 肥雀云

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

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

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

　　<李>三层页面共享数据,李　　<李>进入或退回当前路由时,数据更新。　　<李>对于故事列表页,返回时保留之前浏览位置;李　　　　

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

<强>共享数据

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

　　　　　　窗口。profileData=https://www.yisu.com/zixun/{ 　　storyList: [{ 　　内容:“xxx”, 　　类型:0, 　　picList: […], 　　},……) 　　描述:{…},//其他字段数据　　} 　　　　

注意到,如果需要更新storyList,则应该使用能够被检测到的方法,如推、拼接等。

数据更新与缓存

数据更新与缓存大致有两种方案:
　　

第一种,利用vue-router的导航守卫(见文档:https://router.vuejs.org/zh/guide/advanced/navigation-guards.html),主要使用路由组件内导航beforeRouteEnter和beforeRouteLeave;
　　

第二种,在路由组件中监听路线,美元每次路由变化就会调用其中方法加载数据,需要注意的是第一次进入路由组件美元路线的监听不会触发,我们需要在安装方法中调用相同加载数据的方法;

我们在代码中使用的是方法一,以故事列表进入到故事编辑页为例,从列表传递指数给编辑页,利用beforeRouteEnter进入路由时就加载新的数据。
　　

编辑页中关键代码,即加载数据,更新本地共享数据:

　　　　　　出口默认{//编辑页中,进入路由前加载数据　　beforeRouteEnter(下),从{ 　　下(vm=比;{ 　　const指数=vm。route.params.storyIndex美元　　vm。storyIndex=指数　　vm。storyData=https://www.yisu.com/zixun/window.profile.storyList(指数) 　　}) 　　}, 　　　　方法:{//提交成功后,更新本地共享数据　　提交(){ 　　Adapter.post (“…”)。(结果=比;{ 　　window.profile.storyList.splice(这一点。storyIndex 1结果) 　　}) 　　}, 　　}, 　　} 　　　　

列表页中关键代码,即返回时更新数据:

　　　　　　出口默认{ 　　beforeRouteEnter(下),从{ 　　下(vm=比;{ 　　vm。storyList=window.profileData.storyList 　　}) 　　}, 　　} 　　　　

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

　　<李> beforeRouteEnter中无法调用组件实例,因为执行时还在组件生命周期的beforeCreate之前,而其中接下来的方法是在组件安装之后执行,如需引用可在一方法中,引用其参数,该参数就是组件实例;李　　<李>如果发现你的下一个方法无法执行,请升级到2.6 +版本,之前的版本这部分有些问题;李　　　　

<>强保留浏览位置

从故事编辑页回到故事列表页,我们希望可以保存之前浏览的位置。思路也很简单,进入编辑页时保存scrollTop,返回时scrollTo即可。而且vue-router对象有属性可以实现这个功能,这就简洁多了。
　　

由于我们过渡动画中间,有将路由组件定位成固定的操作,所以,动画结束后再手动滚动到目标位置:

　　　　　　新VueRouter ({ 　　路线, 　　scrollBehavior(从savedPosition) { 　　const y=savedPosition,,savedPosition。y | | 0 　　setTimeout(()=比;{窗口。scrollTo (0, y)}, 300) 　　} 　　}) 　　　　

<强>总结

vue-router我们在偏B端的场景中经常用的到,尤其是分步骤填写表单的页面。前期在使用过程中总是不太顺畅,摸索几次后,最终找到比较“舒适”的使用方法,索性就梳理成文。
　　当然,还有其他一些特殊场景的用法,这里暂时不说了,等项目中用过后再另起一文,继续研究。