Question

我在此处看到了与我的问题相关的几个问题，但是没有一个是完全相同的，它们的解决方案对我不起作用或它们没有答案（例如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

早上好，

一段时间以来，我一直在同一个问题上挣扎，例如，我有一些带有新闻案例的概述页面。当您单击新闻项时，您将导航到详细信息页面（顶部），但是当您向后导航时，您将到达概述页面的其他位置。还没有找到任何解决方案，您的问题与我的情况几乎相同，尤其是：“意味着用户没有回到原来的位置。”

我刚刚在“ router-view”周围添加了“ keep-alive”功能。也许这也可以在您的情况下起作用。我的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>

Vue路由器scrollBehavior：为什么savePosition总是等于{x：0，y：0}？

1 个答案: