V3+ts实现路由跳转保存记录当前位置

第一步：在router文件里面的index.js写入

 {
    path: '/usedcar',
    name: 'Usedcar',
    component: () => import(/* webpackChunkName: "about" */ '../views/Usedcar.vue'),
    meta: {
      keepAlive: true // 需要缓存
    }
  }

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

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

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

 // 跳转路由守卫  
 onBeforeRouteLeave((to, from, next) => {
   // 将当前位置进行一个状态保存
    cars.rememberScroll = document.documentElement.scrollTop;
    next();
  })

  // 组件激活

  onActivated(() => {
    document.documentElement.scrollTop = cars.rememberScroll;
  })