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" >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
],
});