之前开发的是单页应用，按照深度分为三层：目录页、一级子页(标签页、故事页等)。)，以及二级子页面(故事编辑页面)。

这三类页面都共享一个完整的数据模型，从上一页进入下一页时可以加载相应的数据；当我回到上一级时，数据被更新了。举个栗子，从故事页面点击“编辑”按钮，进入故事编辑页面，默认填写点击“编辑”按钮对应的故事数据；当更新故事编辑页面上的数据并返回故事页面时，新更新的信息也可以显示在故事页面上。

针对这一需求，我们需要解决以下问题：

三层页面共享数据；输入或返回当前路线时更新数据；对于故事列表页面，返回时保持之前的浏览位置；在本文的后面，我们将针对上述问题提出解决方案。

共享数据

多条路由共享数据，vuex可以作为数据中心。因为数据处理并不复杂，所以为了简单起见，窗口全局对象被用作在路线之间传输数据的工具。我们可以以故事为例，将核心数据设计如下：

窗户。profile data={ story list : [{ content : ' XXX '，type: 0，piclist: [.],},]，描述3360 {.}，//其他字段数据}注意，如果需要更新故事列表，应该使用。

数据更新和缓存

数据更新和缓存大致有两种方案：

第一种是使用vue-router的导航卫士(见文档：https://router . vuejs . org/zh/guide/advanced/navigation-guards . html)，主要使用路由内组件来导航beforeRouteEnter和beforeRouteLeave；

其次，在路由组件中监听$route，并在每次路由更改时调用方法加载数据。需要注意的是，第一次输入路由组件$route时，监控不会触发，所以我们需要调用相同的方法在挂载的方法中加载数据。

我们使用代码中的第一种方法，以故事列表进入故事编辑页面为例，将索引从列表传递到编辑页面，在使用BeforeRouter进入路由时加载新数据。

编辑页面中的关键代码，即加载数据和更新本地共享数据：

在导出默认值{//编辑页面上，加载数据beforeRouteEnter，from，next) { next(vm={ const index=vm。$ route . params . story index VM . story index=index VM . story data=window . profile . story list[index]})，Methods: {//更新本地共享数据中的关键代码submit () {adapter。帖子('.').然后(结果={window。侧写。故事列表。拼接(这个。storyindex，1，result)})}，}，}列表页，即返回时。

导出默认值{beforeroutener (to，from，next){ next(VM={ VM . story list=window . profile data . story list })}，}这部分需要注意两点：

不能在BeforeRouter中调用组件实例，因为它是在组件生命周期中的beforeCreate之前执行的，而下一个方法是在组件装入之后执行的。如果需要引用，可以在下一个方法中引用它的参数，就是组件实例；如果您发现下一个方法无法执行，请升级到2.6版。以前的版本有一些问题；保留浏览位置

从故事编辑页面回到故事列表页面，我们希望保存之前的浏览位置。想法也很简单。当您进入编辑页面时，保存滚动顶部，当您返回时，滚动到。此外，vue-router对象具有实现该功能的属性，这要简单得多。

在过渡动画的中间，我们有将布线组件定位为固定的操作，因此在动画之后，我们手动滚动到目标位置：

newvue路由器的摘要({routes，scroll行为(to，from，saved position){ const y=saved position saved position . y | | 0 settimeout(()={ window。滚动到(0，y)}，300)})

Vue-router常用于B端场景，尤其是逐步填写表单页面的时候。早期在使用过程中总是不顺利。经过几次摸索，我们终于找到了一个比较“舒服”的使用方法，并简单梳理成册。当然，还有一些特殊场景的其他用法，这里暂时不做赘述。在项目中使用它们后，我们将开始另一篇文章并继续研究它们。

参考

1.《官方文档》 2.《滚动行为》

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。