Why does my url keep getting changed by vue.js routing?

Question

I have a pretty simple page right now that I'm just setting up for future development but it's kind of come to a halt now that my URL keeps getting changed.

import shipmentInformation from './shipment-information.vue';

Vue.use(VueRouter);

let router = new VueRouter({
    base: '/QuickQuote/QuickQuoteRefactor/',
    routes: [
        { name: 'shipmentInformation', path: '/', component: shipmentInformation }
    ]
});

new Vue({
    router
}).$mount('#quickQuoteApp')

This is run on a page where #quickQuoteApp contains a <router-view> element. Users get to this page by navigating to (on local machine) localhost/QuickQuote/QuickQuoteRefactor. The components load and I see the hash get added to the end of the url for a split second (localhost/QuickQuote/QuickQuoteRefactor#) before it changes to localhost/#/ for some reason.

Any ideas on why this is happening. I thought the 'base' option was supposed to take care of this.

Answer 1

I discovered that this was caused by a conflict between vue-router and jquery.history.js

Not sure of the exact cause but it looked like History was trying to 'correct' the hash changes in the url made by vue-router, therefore breaking it.