Vue interview encountered topic

Hash routing and routing the difference between the two modes of history

Reference: https://www.cnblogs.com/ceceliahappycoding/p/10552620.html

https://www.jianshu.com/p/9449d7605279

Own summary:

Construction of SPA (single-page application), it is necessary to introduce front-end routing system, which is the meaning of existence Vue-Router.

Core front-end routes, is that - while not changing the view request to the backend. (Refers to the real page F5 I understand)

Front-end routing is actually very simple to implement, is to match different path url , parse, load the different components, and dynamic rendering html content area.

 

 

1.hash (default) - the # symbol (this is not a cryptographic hash in the hash operation) in the URL address bar.
Such as the the URL of: http://www.abcdef.com/#/hello , hash value of # / hello. It is characterized by: hash Despite the URL>, but will not be included in the HTTP request, there is no effect on the back end, thus changing the hash will not reload the page.
2.history - using the new in HTML5 History Interface to pushState () and replaceState () method. (Requires a specific browser support

 

Of course, history is not everything is good. When the SPA although its capability in the browser, but you really want to initiate HTTP requests to the back-end through URL, the difference between the two came. Especially after the user manually enter the URL enter, or refresh (restart) browser time.

You want to configure the rear end of the path corresponding to the page request otherwise minute of brush page 404, (because of the path you are not corresponding to the rear end of this page ah); a refresh is actually due to the request to the server, without play false .

the hash mode, only the hash symbols before content is included in the request, such as  http://www.abcdef.com , so the rear end, even if there is no route to achieve full coverage, does not return 404 error.

 

the history mode, the front end of the URL and the URL must initiate a request to the rear end of the actual consistency, such as http://www.abcdef.com/book/id . If the backend lack of / book / id route processing, returns a 404 error. Vue-Router official website in such a description: "However, this mode you want to play well, but also the background configuration support ...... So, you want to add a candidate resources to cover all situations in the service side: if the URL match any static resources, you should return the same index.html page, which is dependent on your app page