The principles and differences between hash and history in vue

Differences in routing modes in Vue: Hash: uses URL fragments to manage state, does not send HTTP requests, is not SEO friendly, has faster navigation, and allows cross-domain. History: Use browser history API to manage state, send HTTP requests, SEO friendly, update browser history, restrict cross-domain.

The principles and differences between hash and history in Vue

In Vue.js Single Page Application (SPA) , use routing to manage page navigation and state in your application. There are two main routing modes: hash and history.

Principle

Hash:

• Use URL fragments (#) to manage navigation state.
• Does not send an actual HTTP request to the server, but listens for URL changes via JavaScript.

History:

• Use the browser history API to manage navigation state.
• will send an actual HTTP request to the server, changing the browser's address bar.

Difference

1. URL Appearance

• Hash: URL contains a hash (#) symbol, followed by navigation status. For example: https://example.com/#/home
• History: URL is similar to the URL of a traditional website and does not contain a hash. For example: https://example.com/home

2. Browser History

• Hash: No Will change your browser's history.
• History: The browser's history will be updated, just like navigating on a normal website.

3. Impact on SEO

• Hash: Since the hash is not included in the HTTP request, it is not friendly to SEO because search engines Unable to grab the hash part.
• History: Since URL changes are implemented via HTTP requests, they are SEO friendly and search engines can crawl and index the page.

4. Performance

• Hash: Navigation is faster because there is no need to send HTTP requests to the server.
• History: Navigation is slower due to the need to send HTTP requests to the server.

5. Cross-domain restrictions

• Hash: Allows cross-domain navigation because it uses JavaScript to listen for URL changes.
• History: Cross-domain navigation is not allowed because an HTTP request will be sent and the browser blocks cross-domain requests.

Use Case

• Hash: Commonly used in old browsers that do not support the HTML5 history API or that require cross-domain navigation in the application.
• History: Commonly used in applications that need to be SEO friendly, maintain browser history, or update the address bar.

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