Vue3+ts实现路由跳转保存历史记录位置返回滚动记录位置

1.在router文件里面的index.ts给要缓存的组件设置meta，设置keepAlive属性，属性值为true

  {
    path: '/usedcar',
    name: 'usedcar',
    component: () => import('../views/usedCar/index.vue'),
    meta: {
      keepAlive: true //需要缓存
    }
  },

2.使用keep-alive标签包裹要缓存的组件，

判断哪个组件需要缓存  (注意Component中的C要大写)

<template>
  <!-- vue3.0配置 keep-alive-->
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

3. 在点击跳转到详情页面时候，使用缓存组件特有的钩子onBeforeRouteLeave将滚动的值（scrollTop）保存起来。再次返回列表页的时候会触发activated（也是缓存组件特有的钩子）来把在onBeforeRouteLeave中存储的滚动值赋值给滚动的盒子

首先引入onActivated， onBeforeRouteLeave

import {onActivated} from 'vue'

import { onBeforeRouteLeave} from "vue-router"

代码实现

 // 跳转路由守卫
  onBeforeRouteLeave((to, from, next) => {
    // 将当前位置进行一个保存
    cars.remeberScroll = document.documentElement.scrollTop
    next()
  })
  //   组件激活
  onActivated(() => {
    document.documentElement.scrollTop = cars.remeberScroll
  })