vue-router如何在返回时返回到上次滚动位置

路由配置文件里

const router = new VueRouter({
  mode: 'history',
  routes,
  // to:要进入的目标路由对象，到哪里去
  // from:离开的路由对象，从哪儿来
  // savedPosition 当且仅当 popstate 导航 (通过浏览器的 前进/后退 按钮触发) 时才可用。savedPosition: 会记录滚动条的坐标，点击"后退/前进" 时的记录值(x:?,y:?)
  scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    }
    // 如果keepAlive的话，保存停留的位置：
    if (from.meta.keepAlive) {
      from.meta.savedPosition = document.body.scrollTop;
    }
    // return 期望滚动到哪个的位置
    return {
      x: 0,
      y: to.meta.savedPosition || 0,
    };
  },
})

在router.js里面需要记录位置的单页面里面

let routes = [
  {
    path: '/',
    name: 'home',
    component: import('@/views/home/index'),
    meta: {
      title: 'home',
      keepAlive: true
    }
  }

在组件中

<keep-alive >
   <router-view v-if="$route.meta.keepAlive"></router-view>
</keep-alive>
<router-view v-if="!$route.meta.keepAlive"></router-view>

可以看下面的例子理解scrollBehavior

Vue 路由 控制滚动行为

---

参考：
vue-router如何在返回时返回到上次滚动位置 方法集锦