In Vue.js, a hashbang (#!) in the URL is commonly associated with older-style client-side routing. However, modern Vue.js applications typically use the HTML5 History Mode for cleaner and more SEO-friendly URLs. When using History Mode, you may want to remove the hashbang from the URL for aesthetic and usability reasons.
To remove the hashbang from the URL, you need to configure your server to correctly handle the routes. Additionally, make sure your Vue Router is set up to use HTML History Mode as shown in the below syntax.
Syntax:
const router = new VueRouter({
mode: 'history',
routes: [
// Your routes go here
],
});
Problem
Before directly going to the solution let us first understand the problem properly. The problem is that, by default VueJS shows a # symbol inside the browser route URL and we have to remove it using VueJS.
Example: The below example explains the problem with its code and output.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width,
initial-scale=1.0" />
<title>GFG</title>
</head>
<body>
<div id="app"></div>
<!-- VueJS CDN Link -->
<script src=
</script>
<!-- VueJS Router CDN Link -->
<script src=
</script>
<script>
// Define components
const Home =
{ template: `
<div>
<h2>Home</h2>
</div>` };
const About = {
template: `
<div>
<h2>About</h2>
</div>` };
const Contact = {
template: `
<div>
<h2>Contact</h2>
</div>` };
// Create a VueRouter instance
const router = new VueRouter({
routes: [
{
path: "/",
component: Home
},
{
path: "/about",
component: About
},
{
path: "/contact",
component: Contact
},
],
});
// Create a Vue instance
new Vue({
el: "#app",
router,
template: `
<div>
<h2 style="color:green">
GeeksforGeeks
</h2>
<h2>
How to remove hashbang
from url in vueJS?
</h2>
<router-link to="/">
Home
</router-link> |
<router-link to="/about">
About
</router-link> |
<router-link to="/contact">
Contact
</router-link>
<router-view></router-view>
</div>
`,
});
</script>
</body>
</html>
|
Output:
Solution
To remove the hash, you should use the router’s history mode, which leverages the history.pushState API to make URL navigation perform without reloading the page.
Example: The below code example explains how you can use the history mode to remove hashbang from URL in VueJS.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<title>Vue.js without Hashbang</title>
</head>
<body>
<div id="app"></div>
<script src=
</script>
<script src=
</script>
<script>
// Define components
const Home =
{ template: "<div><h2>Home</h2></div>" };
const About =
{ template: "<div><h2>About</h2></div>" };
const Contact =
{ template: "<div><h2>Contact</h2></div>" };
// Create a VueRouter instance
const router = new VueRouter({
mode: "history", // Set mode to 'history'
routes: [
{ path: "/", component: Home },
{ path: "/about", component: About },
{ path: "/contact", component: Contact },
],
});
// Create a Vue instance
new Vue({
el: "#app",
router,
template: `
<div>
<h2 style="color:green">GeeksforGeeks</h2>
<h2>How to remove hashbang from url in vueJS?</h2>
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link> |
<router-link to="/contact">Contact</router-link>
<router-view></router-view>
</div>
`,
});
</script>
</body>
</html>
|
Output: