A brief analysis of the difference between hash and history in Vue front-end routing

VueWhat is the difference between front-end routing hash and history? In this article, we will learn about the difference between front-end routing hash and history. I hope it will be helpful to everyone!

Before you understand these two routes, whether it is vue or react, it will inevitably be done when the project is created. When choosing between routes, you will inevitably get entangled between hash and history , or you may just use the default hash with # in a confused way. Routing, after reading this sharing, I guarantee that you will not have trouble choosing which route to choose, and you can choose according to your needs. If you have any questions, please point them out in the comment area and let’s communicate together.

A brief introduction to Vue Router

• Vue Router is the official routing plug-in of Vue.js , it is deeply integrated with Vue.js and is suitable for building single-page applications. vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components. Traditional page applications use some hyperlinks to achieve page switching and jumps. In the vue-router single-page application, it is the switching between paths, that is, the switching of components. The essence of the routing module is to establish the mapping relationship between url and page. (Learning video sharing: vue video tutorial)
• As for why we can’t use the a tag, this is because everything we use Vue to do is a single-page application, which is equivalent to having only one mainindex.html page, so the tag you wrote will not work, you must use vue-router for management.

Vue Router implementation principle

• Before understanding the routing mode, we must first understand,vue-roter What is the implementation principle, what is a single page application, and what are its characteristics? This will make it easier to deepen your understanding of routing.

• SPA Single page and application method: A single page application has only one complete page; when it loads the page for the first time, it will html The page is downloaded together with all other page components, so that when it switches pages, it will not load the entire page, but only update the content in a specified container.

• One of the cores of single page application (SPA) is: updating the view without re-requesting the page.

• The three major steps of the underlying implementation of the router object are (1)Monitor address bar changes; (2)Find the page corresponding to the current path Component; (3) Replace the found page component with to the location of router-view.

• vue-router When implementing single-page front-end routing, two methods are provided: Hash mode and History Mode; vue2 determines which method to use based on the mode parameter, while vue3 uses the history parameter. Below we will learn more about this attribute.

  

##Hash

Brief description

• vue-router Default hash mode - Use URL hash to simulate a complete URL, so when the URL changes, the page will not be reloaded. hash (#) is the anchor point of URL, which represents a position in the web page. If you only change the part after #, the browser will only scroll to At the corresponding position, the web page will not be reloaded, which means that # is used to guide the browser's actions and is completely useless to the server. HTTP will not be included in the request. ##, and every time you change the part after #, a record will be added to the browser's access history. Use the "Back" button to return to the previous position, sohash The mode changes the anchor point value and renders different data at the specified DOM position according to different values.

• # The symbol itself and the characters following it are called hash, which can be accessed through window.location.hash Property reading.

Features

• hash Although it appears in the URL, it will not be included in HTTP Requesting. It is used to guide browser actions and is completely useless on the server side. Therefore, changing hash will not reload the page
• You can add a listener for the change of hash Event:

•    window.addEventListener("hashchange", fncEvent, false)

• Every time the hash (window.location.hash) is changed, a record will be added to the browser’s access history
• The url contains a # number.

Settings

• vue3 Settings hash Pattern routing

  

history

##Brief description

##history
• It is another mode of routing. Since the hash mode will contain # in the URL, if we do not want to have #, we can use the history mode of routing, and only need to add router## in the response. # When configuring rules, just add it. vue’s routing defaults to hash mode. Uses the new pushState()
and
• replaceState() methods in HTML5 History Interface. These two methods are applied to the browser's history stack. Based on the current back, forward, go
, they provide the function of modifying the history record. . It's just that when they perform modifications, although the current URL has been changed, the browser does not immediately send a request to the backend.
Settings

Features

Route jump No need to reload the page.

Without #, most people think it looks much better than hash routing.
• The compatibility is not as good as hash, which will be explained below
• Production environment problems and solutions

When we put history After the project is deployed to the server, we enter a URL in the browser (for example,

www.test.com

). At this time, it will go through dns resolution, and after getting the ip address, we will send it to the server based on the ip address. Initiate a request, and after the server receives the request, it returns the corresponding results (html, css, js). If we set a redirect on the front end, the page will jump to
• www.test.com/home, and the front end will match the corresponding component and render it on the page. If we refresh the page at this time, the browser will send a new request www.test.com/home. If the backend server does not have an interface corresponding to /home, then 404 will be returned.

  The solution to the production environment refresh 404 can be done by proxy forwarding in

  nginx
, and configured in nginx to check whether the resources in the parameters exist in order. If None were found, so nginx internally redirected to the project homepage.

• 

Development environment - historyApiFallback

Some friends may have questions about why the development environment I haven't encountered this problem. Isn't it the same refresh operation as in production?

• 

  I also had questions here. After checking the relevant information, I found that
webpack# in
• vue-cli

  ## Helped us handle it

  If we change this configuration to false, the browser will regard our request as a get request. If If the backend does not have a corresponding interface, the following error message will appear.

• 

  ##Summary

That’s it We use the two routing modes and differentiation of vue-roter

. To put it simply,

hash
• is good for routing compatibility, but it looks ugly with #,

  history is the same as the normal url path, but needs to be configured separately on the server. Everyone can use it as needed according to their own preferences. Students who have questions are welcome to communicate in the comment area.

(Learning video sharing: web front-end development, Basic programming video)

The above is the detailed content of A brief analysis of the difference between hash and history in Vue front-end routing. For more information, please follow other related articles on the PHP Chinese website!