How to Remove Hashbang From URL in VueJS ?
Last Updated :
28 Apr, 2025
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.
HTML
<!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=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
<!-- VueJS Router CDN Link -->
<script src=
"https://cdn.jsdelivr.net/npm/vue-router@3">
</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.
HTML
<!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=
"https://cdn.jsdelivr.net/npm/vue@2">
</script>
<script src=
"https://cdn.jsdelivr.net/npm/vue-router@3">
</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:
Similar Reads
How to Get Query Parameters from a URL in VueJS ? Query parameters are part of a URL that assigns values to specified parameters. They start after the question mark and are separated by ampersands ("&") in the URL. For example, in the URL https://example.com?name=John&age=23, name=John and age=23 are query parameters. The below-listed metho
8 min read
How to read a hash with an “&†sign in the URL ? It's a very common situation in web development where users want to extract or read information from any URL. In the case of the unavailability of the server-side code, the programmer can make use of JavaScript or jQuery to read information. To read the URL with an & sign, we can use the split()
2 min read
How to Redirect to Another Page in VueJS ? Redirecting to another page is a common requirement in web development especially in the Vue.js applications. It allows users to navigate seamlessly between the different views or pages within the application. These are the following methods: Table of Content Using router.push() methodUsing the rout
2 min read
How to Bind the Background Image in VueJS ? In VueJS, the background images can be set from different types of properties like data property, computed property, or directly from an image source. In this article, we will see the different approaches to bind the background image in VueJS as listed below: Table of Content Using Inline StyleUsing
2 min read
How to Go Back/Route-Back on Vue-Router ? Vue Router is a navigation library designed specifically for Vue.js applications. It empowers developers to construct single-page applications, with dynamic and client-side routing capabilities. A frequent need in web applications is the ability to navigate back or return to the previous page. In th
5 min read
How to Bind Attributes in VueJS ? In Vue.JS, the attribute binding allows us to properly manipulate the HTML elements that are based on the Vue Data properties and the expressions. We can bind these attributes using 2 different methods as listed below:Table of ContentApproach 1: Using v-bindApproach 2: Using shortHandApproach 1: Usi
2 min read