A. The history, rounding

The history object contains the URL that the user visited (in a browser window). The history object is part of the Window object and can be accessed through the window.history property.

  1. attribute
  • History. length returns the number of urls in the browser history list
  1. methods
  • Back () loads the previous URL in the history list
  • Forward () loads the next URL in the history list
  • Go () takes an integer as an argument to load a specific page in the history list. This method does not work if the argument exceeds the actual url range. If no argument is specified, the default argument is 0, which is equivalent to refreshing the current page.
  • PushState (state, title, URL) adds a record to history. When a new record is added, the browser does not jump to the new address or even check if the address exists, it simply becomes the latest record in the browser’s history. The pushState() method does not trigger a page refresh, but only causes the history object to change and the address bar display to change. The pushState() method causes an error when setting a cross-domain url. The purpose is to prevent malicious code from making the user think it is on another url, since pushState does not cause a page jump.
State A state object associated with the added record, used primarily for the pushState event, which passes in a callback function when it is triggered. Browser will keep the after the object serialization locally, reload this page, you can get the object, if you don't need this object, you can fill in null title the title of the new page, now the browser will ignore the basic parameters, can fill in the blanks string url to the new site, must be connected to the current page in the same domain, Let state={index:1,desc:' description '} history.pushState(state,' title ','/detail/page1') Console. log(window.history.state) // {index:1,desc:' description '}Copy the code
  • The replaceState() method modifies the current record of the history object, just as the pushState() method does. Summary: pushState() adds a new record to the history, and replaceState() replaces the current history.
  1. Pay attention to
  • For security reasons, browsers don’t allow scripts to read these addresses, but they do allow navigation between them. The “forward” and “back” buttons in the browser toolbar actually operate on the History object
  • When you move to a previously visited page, the page usually loads from the browser, rather than re-asking the server to send a new page

2. A hash explanation

The location object contains information about the current URL and the location object is part of the window object, You can use the window.location property to access the hash setting or return the URL(anchor) starting with the hash sign (#) to set the hash property of the location object, and the browser will move to the specified location in the current document

  1. The characteristics of
  • The hash property is a readable and writable string that is the anchor part of the URL (starting with the hash sign)
  • The HTTP request does not contain the # part
  • The location.hash change does not trigger a page reload
  • Changing the hash alters the browser’s access history

Contrast three.

  1. History.pushstate () sets that the new URL can be any url of the same origin as the current URL, and that hash can only modify the part after #, so you can only set the url of the same document as the current URL
  2. PushState () sets the new URL to be exactly the same as the current URL, which also adds the record to the stack, and the new hash value must be different to trigger the action to add the record to the stack.
  3. The pushState(state,title, URL) state argument adds any type of data to a record, whereas hash adds only short strings
  4. In hash mode, only the content before the hash symbol is included in the request, so the back end does not return a 404 error even if the route is not fully covered. In history mode, the url of the front end must be the same as the ACTUAL URL of the back end. For example, www.abc.com/book/id if the back end does not process the route /book/ ID, a 404 error will be returned. So when using history mode, if the URL does not match any static resources, the same Index page should be returned.