W3docs
en
Log in

How to Remove Hashbang from URL in Vue.js

Read this short Vue.js tutorial and learn which method you should use to easily get rid of the hashbang from the URL while using a Vue.js application.

Tags

While using a Vue.js application, you can notice that the URL has a hash "#". Let's see how you can remove this "#" from the 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:

Remove hashbang from URL in Vue.js

import VueRouter from 'vue-router'

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

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

http://w3docs.com/user/id

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

Note: When using history mode, your server must be configured to fallback to index.html on page refresh to avoid 404 errors. Note: This example uses Vue 2 syntax. For Vue 3, use createRouter with createWebHistory().