Hash vs History (Routing)

Hash vs History (Routing)

Vue Router supports two URL modes: hash mode and history mode. Understanding the difference helps you choose the right one for your project.

Hash Mode (Default)

http://example.com/#/about
http://example.com/#/add

The hash (#) tells the browser not to send anything after it to the server. The client handles routing entirely. No server configuration needed.

History Mode

http://example.com/about
http://example.com/add

Clean URLs without the hash. Uses the HTML5 History API (pushState). Requires server configuration to handle all routes by serving index.html.

Enabling History Mode

export default new Router({
    mode: 'history',
    routes: [
        { path: '/', component: Home },
        { path: '/add', component: AddBlog },
    ]
});

Comparison

Aspect	Hash Mode	History Mode
URL format	/#/path	/path
Server config	None needed	Must serve index.html for all routes
SEO	Poor (hash not sent to server)	Better (real URLs)
Easy setup	Yes	Requires server-side catch-all

Key Takeaways

• Hash mode uses # in URLs — no server setup needed, works everywhere
• History mode provides clean URLs — requires server to serve index.html for all routes
• Use history mode for production apps; hash mode for quick prototypes or static hosting