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 isvueorreact, it will inevitably be done when the project is created. When choosing between routes, you will inevitably get entangled betweenhashandhistory, or you may just use the defaulthashwith# 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 Routeris the official routing plug-in ofVue.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 thevue-routersingle-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.htmlpage, so thetag you wrote will not work, you must usevue-routerfor management.

Vue Router implementation principle

• Before understanding the routing mode, we must first understand,vue-roterWhat 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.

• SPASingle page and application method: A single page application has only one complete page; when it loads the page for the first time, it willhtmlThe 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)Monitoraddress bar changes; (2)Find the page corresponding to thecurrent path Component; (3) Replace the found page componentwithto the location ofrouter-view.

• vue-routerWhen implementing single-page front-end routing, two methods are provided:Hashmode andHistoryMode; vue2 determines which method to use based on themodeparameter, while vue3 uses thehistoryparameter. Below we will learn more about this attribute.

  

##Hash

Brief description

• vue-routerDefault 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 ofURL, 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.HTTPwill 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, sohashThe mode changes the anchor point value and renders different data at the specifiedDOMposition according to different values.

• # The symbol itself and the characters following it are calledhash, which can be accessed throughwindow.location.hashProperty reading.

Features

• hashAlthough it appears in the URL, it will not be included inHTTPRequesting. It is used to guide browser actions and is completely useless on the server side. Therefore, changinghashwill not reload the page
• You can add a listener for the change ofhashEvent:

• 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 SettingshashPattern 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 thehistorymode of routing, and only need to addrouter## in the response. # When configuring rules, just add it.vue’s routing defaults tohashmode.Uses the newpushState()
and
• replaceState()methods inHTML5 History Interface.These two methods are applied to the browser's history stack. Based on the currentback, 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 requestwww.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 ofvue-roter

. To put it simply,

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

  historyis 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!