Sometimes, we want to remove hashbang #! from URL with Vue.js and Vue Router.

In this article, we’ll look at how to remove hashbang #! from URL with Vue.js and Vue Router.

How to remove hashbang #! from URL with Vue.js and Vue Router?

To remove hashbang #! from URL with Vue.js and Vue Router, we disable hash mode.

For instance, we write

import { createRouter, createWebHashHistory } from "vue-router";

const router = createRouter({
  history: createWebHashHistory(),
  // ...
});

with Vue Router 4 to call createWebHashHistory and set= the returned value as the value of the history property to disable hash mode.

With Vue Router 3, we write

const router = new VueRouter({
  mode: "history",
  // ...
});

to create a VueRouter instance with mode set to 'history' to disable hash mode.

Conclusion

To remove hashbang #! from URL with Vue.js and Vue Router, we disable hash mode.