Vue.js - How to remove hashbang #! from url?

How to remove hashbang #! from url?

I found option to disable hashbang in vue router documentation ( http://vuejs.github.io/vue-router/en/options.html ) but this option removes #! and just put #

Is there any way to have clean url?

Example:

NOT: #!/home

BUT: /home

Thanks!

Solution 1:

You'd actually just want to set mode to 'history'.

const router = new VueRouter({
  mode: 'history'
})

Make sure your server is configured to handle these links, though. https://router.vuejs.org/guide/essentials/history-mode.html

Solution 2:

For vue.js 2 use the following:

const router = new VueRouter({
 mode: 'history'
})

Solution 3:

Hash is a default vue-router mode setting, it is set because with hash, application doesn't need to connect server to serve the url. To change it you should configure your server and set the mode to HTML5 History API mode.

For server configuration this is the link to help you set up Apache, Nginx and Node.js servers:

https://router.vuejs.org/guide/essentials/history-mode.html

Then you should make sure, that vue router mode is set like following:

vue-router version 2.x

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

To be clear, these are all vue-router modes you can choose: "hash" | "history" | "abstract".

Solution 4:

For Vuejs 2.5 & vue-router 3.0 nothing above worked for me, however after playing around a little bit the following seems to work:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
  ...
    ,
    { path: '*', redirect: '/' }, // catch all use case
  ],
})

note that you will also need to add the catch-all path.

Solution 5:

For Vue 3, change this :

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

To this :

const router = createRouter({
    history: createWebHistory(),
    routes,
});

Source : https://next.router.vuejs.org/guide/essentials/history-mode.html#hash-mode