What is vue-router

To learn vue-router, you must first know what the routing here is? Why can't we write links directly using the tag as before? How to use vue-router? What are the common routing operations? Waiting for these questions are the main issues to be discussed in this article

What is vue-router

The routing here is not Refers to what we usually call hardware routers. The routing here is the path manager of SPA (Single Page Application). To put it more generally, vue-router is the link path management system of WebApp.
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. The essence of the routing module is to establish the mapping relationship between URLs and pages.
As for why we can’t use the a tag, this is because what we use Vue to do is single-page applications, which is equivalent to having only one main index.html page, so you write Tags don't work, you have to use vue-router to manage them.

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 - Use 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 The URL comes with #. If we don’t want an ugly hash, we can use the history mode of routing. We only need to add "mode: 'history'" when configuring routing rules. This mode makes full use of the history.pushState API to complete. URL jumps without reloading the page.

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