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"> w3wiki </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:
How to Remove Hashbang From URL in VueJS ?
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
],
});