CODEWITHSUNDEEP
vue.jsvue-router
DokiCRO
DokiCRO

Reputation: 4705

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!

Upvotes: 371

Views: 226133

Answers (16)

Mohammad zrar
Mohammad zrar

Reputation: 1

import { createRouter, createWebHistory } from 'vue-router';
const router = createRouter({
history: createWebHistory(),
routes: [],
});


export default router;

Upvotes: 0

Bill Criswell
Bill Criswell

Reputation: 32921

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

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

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

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

Upvotes: 632

Pratik Nichite
Pratik Nichite

Reputation: 1

In Vue 3, you can use createWebHistory module provided by the package vue-router to get a clean URL.

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

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

There is also another module that keeps '#' symbols in the URL named createWebHashHistory, which helps the browser navigate to a particular element.

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

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

You might prefer to use createWebHistory over createWebHashHistory, if you want no '#' symbols in the URL.

For more information feel free to check their docs: https://router.vuejs.org/guide/essentials/history-mode.html

Upvotes: 0

Harvey Mushman
Harvey Mushman

Reputation: 670

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!

Upvotes: 10

IGF
IGF

Reputation: 41

Just replace createWebHashHistory with createWebHistory in router.js file

Upvotes: 4

vivek
vivek

Reputation: 181

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>

Upvotes: 13

Israel Morales
Israel Morales

Reputation: 1711

For vue.js 2 use the following:

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

Upvotes: 119

Tadas Stasiulionis
Tadas Stasiulionis

Reputation: 1316

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

Upvotes: 35

Ankit Kumar Ojha
Ankit Kumar Ojha

Reputation: 2384

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!

Upvotes: 16

Adil H. Raza
Adil H. Raza

Reputation: 1701

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.

Upvotes: 32

Rijosh
Rijosh

Reputation: 1544

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

Upvotes: 1

dmitriyeff
dmitriyeff

Reputation: 21

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

Upvotes: 2

Brahim SLIMANI
Brahim SLIMANI

Reputation: 390

You should add mode history to your router like the below

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

Upvotes: 2

Shujat Munawar
Shujat Munawar

Reputation: 1677

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

At the bottom of this file:

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

Upvotes: 1

Paul
Paul

Reputation: 1041

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

Upvotes: 53

Ritankar Paul
Ritankar Paul

Reputation: 75

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

Upvotes: 5

Related Questions