Prevent location change in browser url in VueJs

Question

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-name.com/#/abc the route path in the browser URL. I want to prevent this so that it always show https://domain-name.com/ irrespective of what path i traverse. Is there a way to do it in Vuejs or any other solution. Appreciate you help!

Thanks, Rahul

user5283119 · Accepted Answer · 2018-05-31 10:19:33Z

1

You're using Vue Router, the idea of it to change routes...

Since you've got the Hash in the url under your router you'll need to add mode attribute.

const router = new VueRouter({
  mode: 'history',
  routes: [...]
})

This will remove the /#/someRoute and it will become /someRoute

Once adding history mode, you'll need to setup your apache/nginx server up respectively to reflect if the user was to type in domain.com/someRoute they would receive nothing which we can fix here.

If you want the link to permanently stay as www.domain.com instead of using vue-router, you'll have to change components as and when you need them essentially having a million and one if statements on the page.

answered May 31, 2018 at 10:19

user5283119

Sign up to request clarification or add additional context in comments.

4 Comments

rahul Over a year ago

Thanks for your comment. For removing the /#/ i have already used the history mode, but i need the path to be www.domain.com always. I wanted to do it in a clean way. I know in Angular we can do it by setting skipLocationChange to true. Thought there will be something similar in Vue as well. But looks like it is quite difficult in Vue to achieve

user5283119 Over a year ago

Does using mode: 'abstract' give you the desired outcome?

rahul Over a year ago

With mode: ''abstract' the home itself is not loading, i get a blank page.

user5283119 Over a year ago

I think the issue is you're using a library that was specifically designed for routing to go directly against it's rules. You'll need to create parameters to say which component you need loading at any given point.

Christhofer Natalius · Accepted Answer · 2018-10-10 08:58:04Z

0

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: '/' }
  ]
})

answered Oct 10, 2018 at 8:58

Christhofer Natalius

3,5092 gold badges33 silver badges43 bronze badges

Collectives™ on Stack Overflow

Prevent location change in browser url in VueJs

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related