How to Remove Hashbang From URL in VueJS ?

Last Updated : 24 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>

How to Remove Hashbang From URL in VueJS ?

Syntax:

Problem

Solution

Similar Reads

Thank You!

What kind of Experience do you want to share?