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!

In Vue 3, you'd want to use createWebHistory for the history option.

import { createRouter, createWebHashHistory } from 'vue-router'

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

In Vue 2, you'd 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

For vue.js 2 use the following:

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

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".

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

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.

Quoting the docs.

> The default mode for vue-router is hash mode - it uses the URL hash to > simulate a full URL so that the page won't be reloaded when the URL > changes. > > To get rid of the hash, we can use the router's history mode, which > leverages the history.pushState API to achieve URL navigation without > a page reload:

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

> When using history mode, the URL will look "normal," e.g. > http://oursite.com/user/id. Beautiful! > > Here comes a problem, though: 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 http://oursite.com/user/id directly in their > browser. Now that's ugly. > > Not to worry: 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. Beautiful, again!

window.router = new VueRouter({
   hashbang: false,
   //abstract: true,
  history: true,
    mode: 'html5',
  linkActiveClass: 'active',
  transitionOnLoad: true,
  root: '/'
});

and server is properly configured In apache you should write the url rewrite

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteRule ^index\.html$ - [L]
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule . /index.html [L]
 </IfModule>

The vue-router uses hash-mode, in simple words it is something that you would normally expect from an achor tag like this.

<a href="#some_section">link<a>

To make the hash disappear

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
] // Routes Array
const router = new VueRouter({
  mode: 'history', // Add this line
  routes
})

Warning: If you do not have a properly configured server or you are using a client-side SPA user may get a 404 Error if they try to access https://website.com/posts/3 directly from their browser. Vue Router Docs

Several good descriptions above lead me into rabbit hole until I realized the "createWebHistory" which replaces "createWebHashHistory" exists in two places in the router/index.js file. Once in the definition of the constant at the end of the file and again on the import from vue-router at the top of the file.

Found down at the end of the router/index.js file

  const router = createRouter({
    mode: 'history',
    history: createWebHistory(),
    // history: createWebHashHistory(),
    routes
  })

First line in router/index.js file

import { createRouter, createWebHistory } from 'vue-router'
// import { createRouter, createWebHashHistory } from 'vue-router'

Now it works like a charm, thank you all above that lead me down this path to success!

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

And if you are using AWS amplify, check this article on how to configure server: Vue router’s history mode and AWS Amplify

You should add mode history to your router like the below

export default new Router({
  mode: 'history',
  routes: [
    {
     ...
    }
  ]
})

The default mode for vue-router is hash mode - it uses the URL hash to simulate a full URL so that the page won't be reloaded when the URL changes. To get rid of the hash, we can use the router's history mode, which leverages the history.pushState API to achieve URL navigation without a page reload:

import {routes} from './routes'; //import the routes from routes.js    

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

new Vue({
    el: '#app',
    router,
    render: h => h(App)
});

> routes.js

import ComponentName from './ComponentName';

export const routes = [
   {
      path:'/your-path'
      component:ComponentName
   }
]

Reference

Open the file in src->router->index.js

At the bottom of this file:

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

Just replace createWebHashHistory with createWebHistory in router.js file