Vue-router scrollBehavior：为什么 savedPosition 总是等于 { x: 0, y: 0 }？

Question

我在这里看到了几个与我的问题相关的关于 SO 的问题，但它们都不相同，它们的解决方案对我不起作用或没有答案（例如 this question。

我正在开发一个包含列表页面的 Vue.js 应用程序。当用户单击列表中的一项时，路由器导航到新的“详细信息页面”。然后，当用户返回时（通过浏览器按钮，或通过页面上使用window.history.back() 的链接，我使用路由器的scrollBehavior 属性将用户带回原来的位置：

scrollBehavior: (to, from, savedPosition) => {
  if (savedPosition) {
    return savedPosition;
  };
  return { x: 0, y: 0 };
};

不幸的是，当用户导航到详情页时，页面会跳回到窗口顶部在导航到详情页组件之前，然后，当用户返回到列表页时, savedPosition 等于 { x: 0, y: 0 }，这意味着用户不会回到原来的位置。

有没有办法让 vue-router 保留列表页面组件的位置？这是否与页面在导航到详细页面组件之前跳转到右上角的事实有关？

如果需要任何其他信息，请询问。

Answer 1

早安，

一段时间以来，我一直在为同样的问题苦苦挣扎，例如，我有一些包含新闻案例的概览页面。当您单击新闻项目时，您将被导航到详细信息页面（到顶部），但是当您返回时，您最终会在概述页面上的其他位置结束。也没有找到任何解决方案，您的问题与我的情况几乎相同，尤其是：“意味着用户没有回到原来的位置。”

我刚刚让它在我的“路由器视图”周围添加“保持活动”。也许这也适用于您的情况。我的 App.vue 文件中的代码现在是：

<template>
  <div id="app">

    <the-header/>

    <keep-alive><router-view/></keep-alive>

    <the-footer/>

    <back-to-top/>

  </div>
</template>

<script>
  //import 'bulma'

  import TheHeader from './components/TheHeader'
  import TheFooter from './components/TheFooter'
  import BackToTop from './components/BackToTop'
  import VueMarkdown from 'vue-markdown'

  export default {
    components: {
      TheHeader,
      TheFooter,
      BackToTop,
      VueMarkdown
    }
  }
</script>

<style lang="scss">
  @import "assets/global.styles";
</style>