title: After adding Global Route Guards in Vue Router the URL won't update anymore
body: <p>I've been following the VueMastery courses and stumbled upon an unexpected problem I cannot seem to resolve myself.</p>
  
  <p>Without using the Global Router Guards the URL updates normally on both modes. But as soon as I add the following hooks to my router (router/index.js) I get no errors whatsoever, but the URL won't update anymore:</p>
  
  <pre><code>router.beforeEach((routeTo, routeFrom, next) =&gt; {
    NProgress.start();
    next();
  });
  
  router.afterEach((routeTo, routeFrom, next) =&gt; {
    NProgress.done();
    next();
  });
  </code></pre>
  
  <p>Using:</p>
  
  <ul>
  <li>@vue/cli 4.2.3 </li>
  <li>vue-router 3.1.5</li>
  </ul>
  
  <p>My complete router (router/index.js) file contains the following script:</p>
  
  <pre><code>import Vue from "vue";
  import VueRouter from "vue-router";
  import EventList from "../views/EventList.vue";
  import store from "@/store/index";
  import NProgress from "nprogress";
  
  Vue.use(VueRouter);
  
  const routes = [
    {
      path: "/",
      name: "event-list",
      component: EventList
    },
    {
      path: "/event/create",
      name: "event-create",
      component: () =&gt;
        import(/* webpackChunkName: "event-create" */ "../views/EventCreate.vue")
    },
    {
      path: "/event/:id",
      name: "event-show",
      component: () =&gt;
        import(/* webpackChunkName: "event-show" */ "../views/EventShow"),
      props: true,
      beforeEnter(routeTo, routeFrom, next) {
        store.dispatch("event/fetchEvent", routeTo.params.id).then(event =&gt; {
          routeTo.params.event = event;
          next();
        });
      }
    }
  ];
  
  const router = new VueRouter({
    mode: "history",
    routes
  });
  
  router.beforeEach((routeTo, routeFrom, next) =&gt; {
    NProgress.start();
    next();
  });
  
  router.afterEach((routeTo, routeFrom, next) =&gt; {
    NProgress.done();
    next();
  });
  
  export default router;
  </code></pre>
  
  <p>And is imported and used in my main.js:</p>
  
  <pre><code>import Vue from "vue";
  import App from "./App.vue";
  import router from "./router";
  import store from "./store";
  
  // Automatic Global Component Registraton
  import upperFirst from "lodash/upperFirst";
  import camelCase from "lodash/camelCase";
  
  // NProgress
  import "nprogress/nprogress.css";
  
  const requireComponent = require.context(
    // The relative path of the components folder
    "./components",
    // Whether or not to look in subfolders
    false,
    // The regular expression used to match base component filenames
    /Base[A-Z]\w+\.(vue|js)$/
  );
  
  requireComponent.keys().forEach(fileName =&gt; {
    // Get component config
    const componentConfig = requireComponent(fileName);
  
    // Get PascalCase name of component
    const componentName = upperFirst(
      camelCase(
        // Gets the file name regardless of folder depth
        fileName
          .split("/")
          .pop()
          .replace(/\.\w+$/, "")
      )
    );
  
    // Register component globally
    Vue.component(
      componentName,
      // Look for the component options on `.default`, which will
      // exist if the component was exported with `export default`,
      // otherwise fall back to module's root.
      componentConfig.default || componentConfig
    );
  });
  
  Vue.config.productionTip = false;
  
  new Vue({
    router,
    store,
    render: h =&gt; h(App)
  }).$mount("#app");
  </code></pre>
  
  <p>What could possibly cause the URL to not update anymore? I tried using the default hash mode but the same problem occurred. The URL's just won't update when clicking the router-links. </p>