Stopbyte

Removing # hashbang from url in Vue router

Web Development
#1

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
#2

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