title: Vue-router scrollBehavior: Why is savedPosition always equal to { x: 0, y: 0 }?
body: <p>I've seen several questions here on SO that are related to my issue, but none of them are identical, and their solutions do not work for me or they are unanswered (e.g. <a href="https://stackoverflow.com/questions/44011979/why-vuejs-router-savedposition-for-scrollbehavior-returns-first-undefined-and-ne">this question</a>.</p>
  
  <p>I'm working on a Vue.js application that includes a list page. When the user clicks on one of the items in the list, the router navigates to a new 'detail page'. Then, when the user goes back (either through the browser buttons, or through a link on the page using <code>window.history.back()</code>, I'm using the <code>scrollBehavior</code> property of the router to bring the user back to their original position:</p>
  
  <pre><code>scrollBehavior: (to, from, savedPosition) =&gt; {
    if (savedPosition) {
      return savedPosition;
    };
    return { x: 0, y: 0 };
  };
  </code></pre>
  
  <p>Unfortunately, when the user navigates to the detail page, the page jumps back to the top of the window <em>before</em> navigating to the detail page component, and then, when the user returns to the list page, <code>savedPosition</code> is equal to <code>{ x: 0, y: 0 }</code>, meaning the user isn't returned to their original position.</p>
  
  <p>Is there a way to have vue-router retain the position of the list page component? Is this related to the fact that the page jumps to the top right before navigating to the detail page component?</p>
  
  <p>If any additional info is required, please ask.</p>