Vue3+Ts实现路由跳转保存当前记录位置

需求：
1：页面一数据由接口返回，修改部分数据，
2：数据仅前端页面调整，暂未提交修改数据库。
3：页面一跳转页面二，再由页面二返回页面一
4：页面一数据仍为修改后的数据
实现：
1：借用方式：keep-alive
2：keep-alive是vue中的一个内置组件，主要是将组建缓存到内存中，避免切换路由的时候页面刷新从而导致dom的重新渲染

一：在router文件下的相关路由中，添加meta

  {
    path: '/',
    name: 'pullup',
    component: Pullup,
    meta:{
      keepAlive:true   //true为需要缓存，false为不需要缓存（不需要的也可以不加）
    }
  },

二：在App.vue中添加keep-alive标签。

<template>
  <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>
</template>

三：在需要缓存的页面进行配置。

 const scrollNum = ref<number>(0)
    onBeforeRouteLeave((to,from,next)=>{  // 组件内路由守卫  离开组件前记录页面位置
        scrollNum.value = document.documentElement.scrollTop || document.body.scrollTop
        next()
    })

    onActivated(()=>{
        if(scrollNum.value!= null && scrollNum.value>0){
            document.documentElement.scrollTop = scrollNum.value
            document.body.scrollTop = scrollNum.value
        }
    })