vue vue-router is a single-page application path manager.
One of the core vue single-page application (SPA) are: to update the view without re-request page. The traditional application page, with hyperlinks to implement switching and jump pages, each update needs to re-request the page view, which we want to see (too many requests).
Vue single-page application is based on and routing component, the routing path for setting access and path map and components together. Therefore vue-router single-page application, and the page switching is to switch between the jump path, i.e. the switch assembly.
Nature routing module is to establish the mapping between the url and pages. Therefore, there have vue-router, to manage the mapping between the path and the path and build components.
vue-router at the front end of single-page routing, provides two ways: Hash History Mode and Mode
- Hash mode:
vue-router default hash mode - use the URL to simulate a complete hash of the URL, so when the URL changes, the page will not reload. hash (#) is the anchor of the URL represents a position of a web page, just change the part after the #, the browser will scroll to the appropriate location, will not reload the page, that hash appears in the URL, but will not be included in the http request, there is no impact on the server (back-end), thus changing the hash will not reload the page; at the same time every change part after the #, it will increase access to a record in the history of the browser, use the "Back" button, you can return to a position; Hash mode so that by changing the value of the anchor, depending on the value of the rendering specifying positions of different data DOM. Principle hash mode is onhashchange event (monitoring hash value changes), you can listen for this event on the window object.
- History mode:
History Mode full use of the new html5 history interface to pushState () and replaceState () method. These two methods used in the browser history stack, the current existing back, forward, go basis, they provide a historical record modification feature. Only when they perform the modification, although the change of the current URL, but not the browser sends a request to the backend immediately.
However, this mode you want to play well, but also the background configuration support. You want to increase server resources, a candidate to cover all situations: if the URL match any static resources, you should return the same index.html page, which is dependent on your app page.
reference:
Introduction and front-end routing vue-router implementation principle
Use vue-router and realization of the principle of
END