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'
})
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
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 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!
You should add mode history to your router like the below
export default new Router({
mode: 'history',
routes: [
{
...
}
]
})
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
Open the file in src->router->index.js
At the bottom of this file:
const router = new VueRouter({
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
}
]
Just replace createWebHashHistory with createWebHistory in router.js file
Success story sharing
const router = new VueRouter({ history: true })
{history: true}
works for first page, but the rest of the routes failed.