Vue3+Ts implements routing jump to save the current record location

Requirements:
1: The data on page 1 is returned by the interface, and part of the data is modified.
2: The data is only adjusted on the front-end page, and the database has not yet been submitted for modification.
3: Page 1 jumps to page 2, and then returns to page 1 from page 2 4
: The data on page 1 is still the modified data
Implementation:
1: Borrowing method: keep-alive
2: keep-alive is a built-in component in Vue, The main purpose is to cache the components in the memory, avoiding the page refresh when switching routes and causing the re-rendering of the dom

One: Add meta to the relevant routes under the router file

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

Two: Add the keep-alive tag in App.vue.

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

Three: Configure on the page that needs to be cached.

 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
        }
    })