The difference between hash routing and history routing in vue

In Vue.js, Hash routing uses URL fragments to represent routing status, which is compatible with old browsers but is not good for SEO; History routing uses URL paths to represent routing status, which is only compatible with modern browsers and is good for SEO; select Which mode depends on application requirements and SEO needs.

The difference between Hash and History routing in Vue.js

Vue.js provides two routing modes: Hash routing and History routing. They have important differences in URL handling, browser compatibility, and SEO.

URL processing

• #Hash routing: Use URL fragments (#) to represent routing status, such as #my- page.
• History routing: Use the real URL path to represent the routing status, such as /my-page.

Browser Compatibility

• Hash Routing: Compatible with all modern browsers, including no support for the HTML5 History API old browser.
• History routing: Only compatible with modern browsers that support the HTML5 History API, such as Chrome, Firefox, Safari and Edge.

SEO (Search Engine Optimization)

• Hash Routing: Will not create new entries in browser history , not conducive to SEO.
• History routing: Creates new browser history entries, which is good for SEO because search engines can crawl and index different routing states.

Other differences

• Back button: When using Hash routing, the back button will trigger popstate Events; when using the History route, it triggers the popstate and hashchange events.
• Page refresh: When using Hash routing, refreshing the page will not trigger routing update; when using History routing, refreshing the page will trigger routing update.
• Performance: History routing generally performs better than Hash routing because it does not require any modification to the URL.

Which routing mode to choose

Which routing mode to choose depends on the specific requirements of the application being developed. If you need compatibility with older browsers or if you don't need SEO, you can use Hash routing. Otherwise, the History route should be used for better performance and SEO.

The above is the detailed content of The difference between hash routing and history routing in vue. For more information, please follow other related articles on the PHP Chinese website!