title: Vue router beforeEach async/await page scroll issue
body: <p>Pages are showing strange scroll behavior when clicking back/front. When triggering those events, the current page scrolls to the position of the back or front page. In other words, the current page scrolls to the targeted position first (savedPosition) and then the page changes.</p>
  <p>I am using the scrollBehavior method in vue-router, but the issue seems to be irrelevant to that (I have deleted the scrollBehavior, yet same problem happens).</p>
  <p>While tracking down the problem, I found where the problem might be caused by, the router navigation.</p>
  <p>In vue-router beforeEach, I'm fetching data using async/await as below.</p>
  <pre><code>router.beforeEach((to, from, next) =&gt; routerHandler(to, from, next))
  </code></pre>
  <p>routerHandler code is below.</p>
  <pre><code>export const routerHandler = async (to, from, next) =&gt; {
    if (to.path !== '/error') {
      console.log('window scrollY before await : ', window.scrollY)
      console.log('window location before await : ', window.location.hash)
  
     GetData().then(response =&gt; {
        console.log('window scrollY after await : ', window.scrollY)
        console.log('window location after await : ', window.location.hash)
  
        // setting data in vue store
        // auth checking process
  
        if (condition) {
          next()
        } else {
          next(route)
        }
      }).catch(e =&gt; {
        console.log('Error:', e)
      })
      return
    }
    next()
  }
  </code></pre>
  <p>What I found out so far is that it seems while waiting for the data to be fetched, the current page scroll moves. If I remove the &quot;await&quot; and &quot;return&quot;, then the issue doesn't occur. However, it is just because next() which is at the bottom is being called and the inner logic is processed after it.</p>
  <p>The console.log result is something like the following</p>
  <pre><code>window scrollY before await :  0
  window location before await :  #/location/one
  window scrollY after await :  813
  window location after await :  #/location/one
  </code></pre>
  <p>This log shows that before the next() is called and page transition happens, scroll changes within the same page...</p>
  <p>So, my question is does using async/await inside vue-router beforeeach cause scroll issues in vue.js? And since I need to fetch data to create auth checking logic before each routing, what can I do to prevent the weird scroll behavior when clicking back/front. (not the button that I created, but the one the browser has... called popstate, I guess?)</p>
  <p>I would be very grateful if anyone could help me out with this!</p>