“This is the 10th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”

preface

In vue scaffolding project, we will probably use vue-Router. Vue-router is a routing management package officially launched by VUe.js. It integrates nested routing mapping, dynamic routing, HTML5 API, and many other features, making it easy to manage routing for a SPA application. Let’s take a look at several routing patterns in vue-Router.

Hash pattern

When using vue-router hash mode, the link in the browser’s address bar will contain a hash number, and the content after the hash number is called the hash value. This hash value has several characteristics:

  1. httpsThe request will not containHash valuecontent
  2. changeHash valueThe page will not be refreshed
  3. changeHash valueA new browser history is generated

So how do we change the hash value? We can retrieve this using window.location.hash in the browser API.

Of course we can use itwindow.location.hashTo modify theHash value We found the browser address bar#At the back of theHash valueIt’s changed to video

Sometimes we might want to do some logic when the hash value in the browser address bar changes. We can use it at this point

Onhashchange event for processing. There are three ways to use onhashchange:

// methods on the browser object
window.onhashchange =  () = >{   // dosomething }
// Add the onHashchange method to the body tag
<body onhashChange="func();"></body>
// Use event listening
window.addEventListener("hashchange", func, false);
Copy the code

The following is the result obtained using event listening:

We can get the address before and after the change from the listener callback.

Hash values are important for browsers, and in addition to switching views, we can also use hash values for anchor operations

<a name='header-2'></a>
Copy the code

When a label with the name header-2 is present in the page, the page or page scrolls automatically to the location of header-2 and the content after the browser address bar # changes to header-2

It is important to note that the anchor function does not work properly when using hash routing in a project.

The history mode

The partial implementation of the history mode in vue-Router uses HTML5’s new pushState() and replaceState() methods, both derived from window.history, which add or replace entries in the browser’s history.

PushState () takes three arguments to pushState(stateObj,title,url):

  1. stateObj: State object. A state object is simply an object. This parameter accepts a maximum of 640kb of serialized objects that are eventually saved on the user’s computer disk. We can usewindow.history.stateGet the state object
  2. title: the title. Not very useful, you can pass an empty string.
  3. url: Adds a new entry to the browser history. The path can be a relative path or an absolute path
history.pushState({foo:"bar"}, "page 2"."bar.html");
Copy the code

When we opened the baidu home page and executed the code in the browser console, the browser’s address bar changed from Baidu.com to baidu.com/more, but the page did not refresh.

State: Console prints {foo: “bar”}

ReplaceState () and pushState() take exactly the same arguments. The difference is that an entry adds a history and an entry replaces a history.

Of course, these two apis are not the only ones used in vue-Router’s history mode. Vue-router inherits all of the API of the history object. For example, we often use $router.go(-1) to return to the previous page ~. This method is actually the Go () method in the history object

Refer to the MDN documentation for details on the window.history API

Advantages and disadvantages of hash and history

Hash way

Advantages: Since HTTPS requests do not carry hash values, refreshing pages or changing hash values does not affect the server.

Disadvantages:

  1. When usingHash valueWhen you do routing, the anchor point function is disabled
  2. hashThe limit of how to pass parameters is based on the maximum parameter limit of the browser URL.
  3. hashMode causes the browser address bar to appear#Not beautiful

The history way

Advantages:

  1. It is very easy to get the parameters passed. And can pass objects up to 640KB
  2. The back end can also easily obtain the route address

Disadvantages:

  1. F5 Refreshing the page may result in page 404, and the front end URL must be the same as the URL that sent the request to the server
  2. After the URL address is changed, the server is re-requested.

The last

If the article has the inadequacy place, also invites everybody to criticize to point out.

Thank you for watching this article hope to give a 👍 comment collection three even! Your likes are my motivation to write.