title: Prevent scrolling to top when vue router changes query params
body: <p>How can I prevent the page from scrolling to the top when I change the route's query param (and the view's <code>props</code>)?</p>
  
  <p>I've tried the following with no luck:</p>
  
  <p><strong>Attempt 1</strong> - Route's component</p>
  
  <p>When I make the timeout an arbitrarily large number (1 second) then it scrolls back down after some delay.</p>
  
  <pre><code>// in my route's component
  props: {...},
  watch: {
    $route(to, from) {
        let y = window.scrollY;
        this.$nextTick(() =&gt; {
          setTimeout(() =&gt; {
            console.log(`scrolling to ${y}`);
            window.scrollTo(0, y);
          }, 0);
        });
      }
  }
  </code></pre>
  
  <p><strong>Attempt 2</strong> - $router's <code>scrollBehavior</code></p>
  
  <p>This logs the correct <code>y</code> value, but doesn't maintain the old position.</p>
  
  <pre><code>scrollBehavior(to, from, savedPosition) {
      if (savedPosition) {
        return savedPosition;
      }
      if (from.path !== to.path) {
        return { x: 0, y: 0 };
      }
  
      let existing = {
        x: window.scrollX,
        y: window.scrollY
      };
      console.log(`Existing scroll`, existing);
      return new Promise(resolve =&gt; {
        setTimeout(() =&gt; {
          resolve(existing);
        }, 0);
      });
  
    },
  
  </code></pre>