Shulou(Shulou.com)05/31 Report--

Today, the editor will share with you the relevant knowledge of what is the difference between hash and history in the Vue front-end routing. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article. Let's take a look.

Before you understand these two kinds of routes, whether vue or react will inevitably choose between routes when the project is created, and there will inevitably be a struggle between hash and history, or you may directly confuse the default hash route with #. After reading this post, make sure that you will not have trouble choosing which route to choose and implement on-demand selection. If you have any questions, you are welcome to point out in the comments section that we should 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. The single-page application of vue is based on routing and components, which are used to set access paths and map paths to components. Traditional page applications use some hyperlinks to switch and jump pages. In vue-router single-page applications, it is the switching between paths, that is, the switching of components. The essence of routing module is to establish the mapping relationship between url and page. (learn video sharing: vue video tutorial)

As for why we can't use a tag, this is because what we do with Vue is a single page application, which is equivalent to only one main index.html page, so the tag you write doesn't work, you have to use vue-router to manage it.

Principle of Vue Router implementation

Before we understand the route pattern, we need to know what the implementation principle of vue-roter is, what is a single-page application, and what are its characteristics, so that it is easier to deepen our understanding of routing.

SPA single page and application method: a single page application with only one complete page; when it loads a page for the first time, it downloads the only complete html page and all other page components, so that when it switches pages, it does not load the entire page, but only updates the contents of a specified container.

One of the core of a single page application (SPA) is to update the view without re-requesting the page.

The three steps of the underlying implementation of the router object are: (1) to monitor the address bar changes; (2) to find the page components corresponding to the current path; and (3) to replace the found page components to the location of the router-vieW.

When implementing single-page front-end routing, vue-router provides two ways: Hash mode and History mode; vue2 decides which method to use according to the mode parameter, and vue3 is the history parameter. Let's learn more about this attribute.

Brief introduction of Hash

Vue-router default hash mode-uses URL's hash to simulate a full URL, so when the URL changes, the page does not reload. Hash (#) is the anchor point of URL, which represents a position in the web page. Only by changing the part after #, the browser will only scroll to the corresponding position and will not reload the web page. In other words, # is used to guide the action of the browser and is of no use to the server. The HTTP request will not include #, and the part after # will be changed every time. Will add a record to the browser's access history, and use the "back" button to return to the previous location, so the hash mode renders different data that specifies the DOM location according to different values by changing the anchor value.

The # symbol itself and the characters that follow it are called hash and can be read through the _ window.location.hash attribute.

Characteristics

Although hash appears in URL, it is not included in the HTTP request. It is used to guide browser actions and is completely useless on the server side, so changing hash will not reload the page

You can add listening events for changes to hash:

Window.addEventListener ("hashchange", fncEvent, false) copy the code

Each time you change hash (_ window.location.hash), a record is added to the browser's access history

Url takes a #.

Set up

Vue3 sets hash mode routing

Brief introduction of history

History is another mode of routing. Because hash mode will take # in url, if we do not want to take #, we can use the history mode of routing. You only need to add it to the response router configuration rule. The default route of vue is hash mode.

Take advantage of the new pushState () and replaceState () methods in HTML5 History Interface.

These two methods are applied to the history stack of the browser. On the basis of the existing back, forward and go, they provide the function to modify the history record. It's just that when they make changes, although the current URL is changed, the browser does not immediately send a request to the back end.

Set up

Characteristics

The route jump does not need to reload the page.

Without #, it looks a lot better than a hash route for most people.

Compatibility is not as good as hash, which will be explained below

Production environment problems and their solutions

When we deploy the history project to the server, we enter a URL (such as www.test.com) in the browser. At this time, we will parse the ip address and send a request to the server based on the ip address. After receiving the request, the server will return the corresponding html,css,js. If we set up a redirection at the front end, the page will jump to www.test.com/home, match the corresponding component at the front end and render it to the page. At this point, if we refresh the page, the browser will send a new request www.test.com/home, and if the back-end server does not have an interface for / home, it will return 404.

The solution of production environment refresh 404 can be forwarded by proxy in nginx, and configure in nginx to check whether the resources in the parameters exist sequentially, and if none of them are found, let nginx redirect to the project home page internally.

Development environment-historyApiFallback

Some partners will wonder why the development environment did not encounter this problem, not the same refresh operation as production.

I also have a question here. After consulting the relevant information, I found that webpack helped us to deal with it in vue-cli.

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

These are all the contents of this article entitled "what is the difference between hash and history in Vue front-end routing?" Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.