In this article, we understand the hash mode and history mode of vue-router

Current version: 3.0.3

Category: src/history/

hash mode

That is, the # symbol in the URL of the address bar (this hash is not a hash operation in cryptography). For example, this URL:/#/hello, the value of hash is #/hello. Its characteristic is that although hash appears in the URL, it will not be included in the HTTP request and has no effect on the backend at all, so changing hash will not reload the page.

history mode

It utilizes the pushState() and replaceState() methods newly added in the HTML5 History Interface. (Requires specific browser support) These two methods are applied to the browser's history stack. Based on the current back, forward, and go, they provide the function of modifying history. It is just that when they perform modifications, although the current URL is changed, the browser will not send a request to the backend immediately.

HTML5History implementation

Use ('popstate') to listen to the browser's scrolling behavior, and then determine whether the configuration has scrollBehavior. If so, call the handleScroll method to handle it.

Scrolling behavior: Using front-end routing, when switching to a new route, you want the page to scroll to the top, or keep the original scrolling position, just like reloading the page. vue-router can do it, and it's better, it allows you to customize how the page scrolls when routing switches.

handleScroll

<!-- Wait until the page is rendered before scrolling -->
 .$nextTick(() => {
   <!-- Initialize data -->
  const position = getScrollPosition()
  const shouldScroll = (router, to, from, isPop ? position : null)

  if (!shouldScroll) {
   return
  }
  <!-- Determine whether it isPromise,The official website says it supports asynchronous -->
  if (typeof  === 'function') {
   (shouldScroll => {
    scrollToPosition((shouldScroll: any), position)
   }).catch(err => {
    if (.NODE_ENV !== 'production') {
     assert(false, ())
    }
   })
  } else {
   scrollToPosition(shouldScroll, position)
  }
 })

scrollToPosition

function scrollToPosition (shouldScroll, position) {
 const isObject = typeof shouldScroll === 'object'
 <!-- rightpositionPerform initialization operations -->
 if (isObject && typeof  === 'string') {
  const el = ()
  if (el) {
   let offset =  && typeof  === 'object' ?  : {}
   offset = normalizeOffset(offset)
   position = getElementPosition(el, offset)
  } else if (isValidPosition(shouldScroll)) {
   position = normalizePosition(shouldScroll)
  }
 } else if (isObject && isValidPosition(shouldScroll)) {
  position = normalizePosition(shouldScroll)
 }
  Used to scroll
 if (position) {
  (, )
 }
}

push

Push operation is also a more critical method in HTML5History mode. It uses pushState to perform jump operation, and then handleScroll to perform scrolling\

export function pushState (url?: string, replace?: boolean) {
  <!-- Save the scrolling position of the current page -->
 saveScrollPosition()
 // try...catch the pushState call to get around Safari
 // DOM Exception 18 where it limits to 100 pushState calls
 const history = 
 try {
   <!-- Determine which operation is -->
  if (replace) {
   ({ key: _key }, '', url)
  } else {
   _key = genKey()
   ({ key: _key }, '', url)
  }
 } catch (e) {
  [replace ? 'replace' : 'assign'](url)
 }
}

HashHistory implementation

For the implementation of HashHistory, the difference between it and HTML5History is the way of Listener and jump

Listener's method uses hashchange, but if you need scrolling, you will listen to popstate

(supportsPushState ? 'popstate' : 'hashchange')

The jump method will determine whether scrolling is needed, and use it directly without it.

function pushHash (path) {
 if (supportsPushState) {
  pushState(getUrl(path))
 } else {
   = path
 }
}

Summarize

The above is the hash mode and history mode of vue-router introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and the editor will reply to you in time. Thank you very much for your support for my website!
If you think this article is helpful to you, please reprint it. Please indicate the source, thank you!