vue3+ts实现路由跳转记住滚动位置 返回时回到上次滚动的位置

1.在router文件里面的index.ts写入 那些路由组件需要缓存

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

2.首先vue3中的keep-alive使用方式 将这个放到App.vue中 将需要缓存的路由进行包裹
判断那个组件需要缓存

<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.利用beforeRouteLeave和kee-alive生命周期 进行滚动位置保存 当离开组件时候保存历史记录 激活组件的时候将保存的滚动位置 进行重新赋值

 // 跳转路由守卫
  onBeforeRouteLeave((to, from, next) => {
    // 将当前位置进行一个状态保存
    cars.remeberScroll = document.documentElement.scrollTop
    next()
  })
  //   组件激活
  onActivated(() => {
    if (cars.remeberScroll != null && cars.remeberScroll > 0) {
      console.log(111)
      document.documentElement.scrollTop = cars.remeberScroll
      document.body.scrollTop = cars.remeberScroll
    }
  })