How to Remove Hashbang from URL in Vue.js

While using a Vue.js application, you can notice that the URL has hash "#". So let's see how you can clear this "#" from URL with the help of the code snippet below.

To remove the hash, you should use the router's history mode, which leverages the history.pushState API to make URL navigation perform without reloading the page:

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

Here is how the URL looks like when you use the history mode:

http://w3docs.com/user/id .

The default mode for vue-router is the hash mode which uses the URL hash to simulate a full URL so that the page won't be reloaded in case the URL changes.


Do you find this helpful?

Related articles