Removing # hashbang from url in Vue router

I have just started using Vue Router but it seems that I have a problem with my URL since a # tag appears in my browsing tab, it looks like this

http://localhost:8080/#/home

Any ideas on how to remove the # symbols and have a normal URL like this?

http://localhost:8080/home

1 Like

Try to go to your router folder and then to index.js Javascript file, where you have defined your routes and components.
then at the end of your file add mode: "history", which leverages the history.pushState API to achieve URL navigation without a page reload:

const router = new VueRouter({
      mode: "history",
      routes,

});

Mode:

  • type: string
  • default: "hash" (in browser) | "abstract" (in Node.js)
  • available values: "hash" | "history" | "abstract"

Configure the router mode.

  • hash : uses the URL hash for routing. Works in all Vue-supported browsers, including those that do not support HTML5 History API.

  • history : requires HTML5 History API and server config. See HTML5 History Mode.

  • abstract : works in all JavaScript environments, e.g. server-side with Node.js. The router will automatically be forced into this mode if no browser API is present.

#base

BUT: Since our app is a single-page client-side app, without a proper server configuration, the users will get a 404 error if they access one of your nested URLs directly in their browser. Now that’s ugly.
To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn’t match any static assets, it should serve the same index.html page that your app lives in.
And the problem solved!

1 Like