title: vue-router's beforeEach guard exhibiting weird behaviour occasionally
body: <p>I've got the following code:</p>
  
  <pre><code>const routes = [
      { path: '/', component: FooView },
      { path: '/bar', component: BarView } 
  ];
  
  const router = new VueRouter({
      routes
  });
  
  router.beforeEach(function(to, from, next) {
      if (to.path === '/bar') {
          next('/');    
      }
  
      next();
  });
  </code></pre>
  
  <p>If I've omitted too much and you need to see other pieces of code related to the router let me know so I can fill it in.</p>
  
  <p>If I open up a new tab and navigate to '/#/bar' I'm successfully redirected to '/#'. However, if I then go into the address bar and manually add '/#/bar' and hit enter I am not redirected. If I then hit enter in the address bar again I <em>am</em> redirected.</p>
  
  <p>I've stepped through the code in the console and I see that it is calling <code>next('/')</code> and I see where it calls <code>push('/')</code> inside of <code>next('/')</code> but it doesn't take affect until I've hit enter in the address bar a second time.</p>
  
  <p>I've tried using <code>router.replace('/')</code> but the behaviour is the same. I've tried using <code>beforeEnter</code> on the individual route but the behaviour is also the same.</p>
  
  <p>Two links I've found where similar behaviour is discussed are: <a href="https://github.com/vuejs/vue-router/issues/748" rel="nofollow noreferrer">https://github.com/vuejs/vue-router/issues/748</a> and <a href="https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/2" rel="nofollow noreferrer">https://forum.vuejs.org/t/router-beforeeach-if-manually-input-adress-in-browser-it-does-not-work/12461/2</a> but neither helped me.</p>
  
  <p>Is someone able to explain this? Is there a disconnect between what I'm trying to do and what functionality vue-router provides? If this behaviour isn't expected can someone propose a work around?</p>