After diligently following the VueMastery courses, I encountered an unexpected issue that has me stumped.
Interestingly, when I do not use the Global Router Guards, the URL updates as expected in both modes. However, once I add the specified hooks to my router (router/index.js), there are no errors thrown but the URL fails to update:
router.beforeEach((routeTo, routeFrom, next) => {
NProgress.start();
next();
});
router.afterEach((routeTo, routeFrom, next) => {
NProgress.done();
next();
});
Details of my setup include:
- @vue/cli 4.2.3
- vue-router 3.1.5
The full script within my router file (router/index.js) is as follows:
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
},
// Additional paths...
];
const router = new VueRouter({
mode: "history",
routes
});
router.beforeEach((routeTo, routeFrom, next) => {
NProgress.start();
next();
});
router.afterEach((routeTo, routeFrom, next) => {
NProgress.done();
next();
});
export default router;
This router configuration is then imported and utilized in my main.js file:
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// Auto Component Registration
// NProgress
import "nprogress/nprogress.css";
// More code...
new Vue({
router,
store,
render: h => h(App)
}).$mount("#app");
Despite trying hash mode as well, the URLs refuse to update upon clicking router links. What could be causing this behavior?