What is the use of vue.router?

vue.router is the official routing plug-in that makes building single-page applications a piece of cake. Vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components; in vue-router single-page applications, switching between paths can be used to achieve page switching and jumps. of.

[Related article recommendations: vue.js]

The function of vue.router is:

vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications. Vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components. Traditional page applications use some hyperlinks to achieve page switching and jumps. In the vue-router single-page application, it is switching between paths, that is, switching of components.

vue-router implementation principle

SPA (single page application): A single page application has only one complete page; it will not load when loading the page Instead of updating the entire page, only the content in a specified container is updated. One of the cores of a single page application (SPA) is: updating the view without re-requesting the page; vue-router provides two methods when implementing single page front-end routing: Hash mode and History mode;

1. Hash mode:

vue-router default hash mode - uses the hash of the URL to simulate a complete URL, so when the URL changes, the page will not be reloaded. Hash (#) is the anchor point of the URL, which represents a position in the web page. If you only change the part after #, the browser will only scroll to the corresponding position and will not reload the web page. In other words, # is used to guide browsing. The action of the server is completely useless to the server, and the HTTP request will not include #; at the same time, every time the part after # is changed, a record will be added to the browser's access history. Use the "Back" button to go back to the previous position; so the Hash mode renders different data at the specified DOM position according to different values ​​through the change of the anchor point value

2. History mode:

Since the hash mode will be included in the URL#, if we don’t want an ugly hash, we can use the routing history mode. We only need to add "mode: 'history'" when configuring the routing rules to make full use of this mode. history.pushState API to complete URL jump without reloading the page.

vue-router is the official routing plug-in of Vue.js. It is deeply integrated with vue.js and is suitable for building single-page applications, making it easy to build single-page applications. . Features included are:

• Nested routing/view tables

• Modular, component-based routing configuration

• Routing parameters, queries, wildcards

• View transition effect based on Vue.js transition system

• Fine-grained Navigation control

• Links with automatically activated CSS classes

• HTML5 history mode or hash mode, automatically degraded in IE9

• Customized scroll bar behavior

Vue’s single-page application is based on routing and components. Routing is used to set the access path and transfer the path Map with components. Traditional page applications use some hyperlinks to achieve page switching and jumps. In the vue-router single-page application, it is switching between paths, that is, switching of components. The essence of the routing module is to establish the mapping relationship between URLs and pages.

Related learning recommendations: javascript learning tutorial

The above is the detailed content of What is the use of vue.router?. For more information, please follow other related articles on the PHP Chinese website!