超赞！Vue3 实现完美过渡体验：保持表格滚动条位置

前端

2023-11-03 15:03:41

用情怀点亮社区：路由元信息打造温暖体验

Vue.js 社区的开发者们，你好

Vue3 推出了令人振奋的新功能，其中之一便是路由元信息。它赋予我们为每个路由添加附加信息的权限，这些信息可供组件访问和利用。在这篇博客中，我将探讨如何运用路由元信息，在用户返回列表页时保留表格滚动条位置，进而提升用户体验。

痛点之声，体验之殇

假设我们拥有一个列表页，内含一张表格。当用户点击表格中的一行时，他们将被引导至详情页。在详情页中，用户可查阅该行的详细信息。浏览完毕后，用户可通过点击浏览器的后退按钮返回列表页。

回归之痛，滑动之殇

然而，回到列表页后，表格的滚动条位置会重置为顶部。这迫使用户不得不手动滚动到他们离开时的位置，着实令人沮丧。

路由元信息的妙用，体验的救星

为了化解这个难题，我们可以使用路由元信息记录表格的滚动条位置。当用户离开列表页时，我们将表格的滚动条位置存储在路由元信息中。随后，当用户返回列表页时，我们可以从路由元信息中获取并还原该位置。

代码演绎，效果呈现

<template>
  <div>
    <table id="tableA">
      <!-- your table code here -->
    </table>
  </div>
</template>

<script>
export default {
  mounted() {
    // 离开页面时记录滚动条的位置
    this.$router.afterEach((to, from) => {
      if (from.name !== 'list') return
      this.$router.meta.scrollTop = this.$el.querySelector('#tableA').scrollTop
    })

    // 返回页面时恢复滚动条的位置
    if (this.$router.meta.scrollTop) {
      this.$nextTick(() => {
        this.$el.querySelector('#tableA').scrollTop = this.$router.meta.scrollTop
      })
    }
  },
}
</script>