Prevent Location Change In Browser Url In Vuejs

I have a vuejs application where i make rest api calls to the backend. I have define the router and navigate the different components. Now as I navigate i see the https://domain-na

Solution 1:

You can use alias

An alias of /a as /b means when the user visits /b, the URL remains /b, but it will be matched as if the user is visiting /a.

The above can be expressed in the route configuration as:

const router = new VueRouter({
  routes: [
    { path: '/a', component: A, alias: '/b' }
  ]
})

So, in your case

const router = new VueRouter({
  routes: [
  // the URL will remains https://domain-name.com/
    { path: '/abc', component: ABC, alias: '/' }
    { path: '/def', component: DEF, alias: '/' }
  ]
})