The difference between:

  • The hash mode updates the page URL by changing the anchor (#) and does not trigger a page reload. We can use window.onhashchange to listen for hash changes and handle routing.

  • History mode is a refreshing jump to a page by calling a series of methods on the window.history object.

Implementation:

hash

Window.location. hash = 'qq' // Set the url hash, #qq' var hash = window.location.hash // '#qq' window.adDeventListener ('hashChange',function(){// Clicking browser forward or back will trigger})Copy the code

history

Window.history. pushState(state,title,url) //state: data that needs to be saved. This data can be obtained in the event. General pass null //url: set the new history URL. The origin of the new URL must be the same as the origin of the current URL, otherwise an error will be thrown. A URL can be an absolute path or a relative path. // The current url is https://www.baidu.com/a/ //history.pushState(null, null, './qq/')=>https://www.baidu.com/a/qq/ //history.pushState(null, null, '/ qq/') = > https://www.baidu.com/qq/ window. History. ReplaceState (state, the title, url) / / and pushState basic same, but it is to modify the current history records, Window.addevevtlistener (' popState ',function(){// Listen for browser forward and back events, }) window.history.back() // Back window.history.forward() // forward window.history.go(1) // forward further, Minus 2 is two steps backCopy the code

The way history mode changes the URL causes the browser to send a request to the server, which is not what we want to see, and we need to do it on the server side: if no static resource matches, the same HTML page should always be returned.

Features:

hash

  • You can change the URL, but it doesn’t trigger a page reload (hash changes are recorded in window.history) so it’s not an HTTP request, so this pattern is not conducive to SEO optimization
  • You can only change the part after #, so you can only jump to the URL of the same document as the current URL
  • Urls can only be changed by strings
  • Use window.onhashchange to listen for changes to the hash to implement a refresh free jump

history

  • The new URL can be any URL of the same origin as the current URL, or it can be the same as the current URL, but this will record a repeat operation on the stack
  • The stateObject parameter allows you to add any type of data to a record
  • Additional title attribute can be set for subsequent use
  • PushState and replaceStates enable the refresh – free jump function

Conclusion:

  • In hash mode, all page hops are performed by the client, making it more flexible for page interception. However, each URL change is not an HTTP request, so it is not conducive to SEO optimization.
  • In history mode, history.pushState is used to realize the page without refreshing. If you change the URL in this way, if you refresh the page, it will cause a new HTTP request, so it will request the server again. This makes it necessary to configure the address on the server side, otherwise the server will return 404. To ensure that this is not a problem, it is best to configure 404 pages in the project

Route parameter transmission:

$router. Push ({name:'message', $route.params.userId ($route.params.userId) {$route.push ($route.push) {$route.push ($route.push) {$route.push ($route.push) {$route.push ($route.push) { Query :{userId:'1102'}}) //query takes the parameter this.$route.query.useridCopy the code