记一次，vue页面，返回的时候，保持上一次的滚动位置

最近有一个移动端的项目，用户从职位列表点击之后，进入职位详情，再返回职位列表的时候，滚动条的位置返回顶部了。客户希望能够保留滚动条的位置。 记下这个问题，

vue页面返回的时候，这两种方式，都能保留页面的滚功位置？ 有啥区别？

备注：问答，参考了 chatgpt

方式1：

// src/App.vue
 <keep-alive>
      <router-view :key="routerKey" />
    </keep-alive>

方式2：

> src/router/index.js
const createRouter = () =>
  new Router({
    scrollBehavior: (to, from, savedPosition) => {
      if (savedPosition) {
        return savedPosition
      } else {
        return { x: 0, y: 0 }
      }
    },
    routes: constantRouterMap
  })

这两种方式都可以保留页面的滚动位置，但存在一些区别：

方式1：使用 <keep-alive> 包裹 <router-view>，可以将组件缓存起来，保留其状态和滚动位置。当切换到其他路由后再返回，组件会被重新渲染，但之前的状态和滚动位置会被保留。

方式2：通过设置 scrollBehavior 方法，在切换路由时可以控制页面的滚动位置。如果之前的路由有保存过滚动位置，那么返回时会还原到该位置；否则，会滚动到页面顶部。

所以，方式1适用于需要保留组件状态的情况，而方式2适用于需要在返回时控制滚动位置的情况。具体选择哪种方式，取决于你的需求和使用场景。