Prevent url from appearing or modifying current address bar value

Question

I have this vue js script

const NotfoundComponent = {
    template: '<h1>Not found</h1>'
};

const HomeComponent = {
    template: '<h1>Home</h1>'
};

const AboutComponent = {
    template: '<h1>About</h1>'
};

const routes = [
    {
    path: '/',
    component: HomeComponent
  },
  {
    path: '/about',
    component: AboutComponent
  },
  {
    path: '*',
    component: NotfoundComponent
  }
];

const router = new VueRouter({
      mode: 'history',
      routes
});

new Vue({
    el: '#app',
    router
});

that uses vue-router. I am running vue js inside a jsp page inside a spring mvc app. I would like to have load the jsp page normally as served by jetty and only use vue js router to navigate between components inside the page.

I have the router setup and working inside the page, however on link click, i do not want any of this vue js links

<div id="app">
  <router-link to="/">home</router-link>
  <router-link to="/about">about</router-link>
  <router-link to="/something">no route</router-link>
  <router-view></router-view>
</div>

to modify the current address bar or append anything new to it.

Can that be done using vue js?.

Answer 1

You want 'abstract' mode.

const router = new VueRouter({
      mode: 'abstract',
      routes
});

This requires you push an initial URL:

// you main Vue instance
new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App },
  mounted() {
    this.$router.replace('/') // added this
  }
})

CodeSandbox demo here.