The front-end routing

It’s easy to create a single page application using Vue+ vue-Router, which maps components to routes and renders them. So vue-Router needs to meet two requirements

1. Record the current page status
2. You can use the browser’s forward and backward functions

Vue-router implements the following three functions to meet the above two requirements

1. Change the URL and prevent the browser from making a request to the server
2. Detect URL changes
3. Intercepts URL addresses and parses the required information to match routing rules

Features of hash mode

Hash refers to the # symbol (also known as the anchor point) in the URL of the address bar. The hash appears in the URL but is not included in the Http request, so a change in the hash value does not reload the page.

Since the change of hash value will not cause the browser to send a request to the server, and the change of hash will trigger the Hashchange event, which can also be controlled by the browser forward and backward, before HTML5, hash was basically used to realize front-end routing.

Characteristics of the history mode

Take advantage of HTML5’s new pushState() and replaceState() apis, which do URL jumps without reloading the page

In addition, the History mode solves the problem of the Hash mode, because hash parameters are urL-based and there are volume limitations if complex data needs to be passed, while the History mode can not only pass parameters in the URL, but also store data in a specific object

Vue – the router

Hash mode and history mode realize the difference between vue-router redirect API