vue 页面跳转，返回到原来滚动的位置（记录位置）

点击事件，从productList跳转到lenderPlatform,物理返回键返回到productList原来的位置

router/index.js

const router = new VueRouter({
  mode: 'history',
  routes: [
    {
      path: '/productList',
      name: 'productList',
      meta: {
        keepAlive: true,
        scollTopPosition: 0
      },
      
       {
      path: '/lenderPlatform',
      name: 'lenderPlatform',
      meta: {
        scollTopPosition: 0
      },
  ],
  scrollBehavior(to, from, savedPosition) {
    console.log(to, from, savedPosition)
    if (savedPosition) {
      return savedPosition
    }else {
      return { x: 0, y: 0 } //期望滚动到哪个的位置
    }
  },

App.vue

<template>
  <div id="app">
    <keep-alive>
      <router-view v-if="$route.meta.keepAlive"></router-view>
    </keep-alive>
    <!-- 非缓存组件跳转页面 -->
    <router-view v-if="!$route.meta.keepAlive"></router-view>
  </div>
</template>

<script>
export default {
  name: "App",
};
</script>

productList.vue

<main class="home-list-container" id="list" ></main>
beforeRouteEnter(to, from, next) {
next((vm) => {
  if (from.path === "/lenderPlatform") {
    document.getElementById("list").scrollTop = to.meta.scollTopPosition;
    console.log("enter", document.getElementById("list").scrollTop);
  }
});
},
beforeRouteLeave(to, from, next) {
 if (from.meta.keepAlive) {
   from.meta.scollTopPosition = document.getElementById("list").scrollTop;
   console.log("leave", from.meta.scollTopPosition);
 }
 next();
},