Trace the principles and knowledge from vue-router

Front-end route (2) Hash route example

What is routing

  • A route is a mapping of URL resolution functions

From the user’s perspective:

  • Record the current page status, for example, save the URL of the current page. When you open the URL again, the web page is still in the saved state
  • You can use the browser’s refresh-free forward and backward feature to bring the page back to the state it was before you updated the page with Ajax, and the URL back to its previous state

From a development perspective:

  • Change the URL without letting the browser make a request to the server, and update the view area content without ajax refreshes
  • Monitoring URL changes
  • Intercepts URL addresses and parses the required information to match routing rules

What is server-side routing

  • When receiving an HTTP request from a client, it finds the corresponding mapping function based on the REQUESTED URL, executes the function, and sends the return value of the function to the client
  • The mapping function equivalent to a URL for a simple static resource server is a file read operation
  • The dynamic resource mapping function may be a database read operation, or it may be some data processing

What is client routing

  • The route mapping function usually does some DOM show and hide operations to display different page components when accessing different paths
  • Vue-router, etc., acts as a container, routing controller, managing mappings between all routes and components (or functions)
  • Front-end routing is based on hash & History

Hash pattern

Hash refers to the # at the end of a URL and the character (for example, https://www.baidu.com/#/liv) that follows it. The # here is the same as the # in CSS. Hash is also called an anchor and is used for page positioning Since hash changes don’t cause the browser to make a request to the server, and since hash changes trigger the browser’s Hashchange event, and the browser’s forward and backward movement can control it, haHS was used to implement front-end routing before the advent of HTML5 history

api:

widnow.location.hash = '/qq' //// To hash the URL, add '#/qq' after the current URL

var hash = window.location.hash // '#/qq'

window.addEventListener('hashchange'.function(){// Listen for hash changes, clicking browser forward and back will trigger})
Copy the code

The history mode

In contrast to history,hash is compatible with Internet Explorer 8, and History is compatible with Internet Explorer 10. Hash is originally used for page positioning. If it is used for routing, the original anchor function is not available History can place parameters in urls and store data in a specific object

To avoid ugly hashes, use the route’s history mode

api:

window.history.pushState(state, title, url)
// state Indicates the data to be saved. This data can be retrieved from event.state when the popState event is triggered
// Title title, usually null
The origin of the new URL must be the same as the origin of the current URL. Otherwise, an error is reported. The url can be an absolute or relative path
/ / https://www.baidu.com/a/ execution history. PushState (null, null, '/'/qq), has become https://www.baidu.com/a/qq/
/ / execution history. PushState (null, null, '/ qq/'), they become https://www.baidu.com/qq/

window.history.replaceState(state, title, url)
PushState: creates a new history

window.addEventListener('popstate'.function(){
    PushState and replaceState methods do not trigger
})

window.history.back()/ / back
window.history.forward()/ / to go forward
window.history.go(1)// One step forward, two steps back
window.history.lengthk// View the number of pages in the current history stack
Copy the code

The way the history mode changes the URL will cause the browser to send a request to the server, so it needs to be processed on the server side. When no static resource is matched, the server side always returns the same HTML page to the client side