vue3项目 页面跳转之后，退回到原页面点击位置

项目背景：

获取多条数据列表，点击其中某条数据跳转到详情页面。再从详情页面退回到数据列表页面，并回到点击跳转处。

实现思路：

1、在app.vue页面采用keep-alive内置组件

2、在跳转之前获取到点击位置处的高度

3、在页面加载时，拿到高度赋值即可

具体实现步骤：

1、在app.vue页面路由出口位置使用keep-alive内置组件

 <router-view v-slot="{ Component }">
    <keep-alive :include="[
          'list',
        ]">
      <component :is="Component" />
    </keep-alive>
  </router-view>

注意：include里面写的是组件的名称，而并非是组件的路由名称

2、在list.vue页面中定义跳转前的scrollTop值

const scrollTopVal = ref(0) // 定义跳转前的scrollTop值

获取点击处的位置高度

 scrollTopVal.value = e.target.scrollTop

3、初始化页面赋值

onActivated(() => {
  scrollRef.value.scrollTop = scrollTopVal.value // 将存储的scrollTop值赋给scroll
})

详细：