Introduction and use of vue-router

install router

• In the vue project (stu54) we have created before, right-click the file and open it in the integrated terminal.

• After opening, look at your own path. When you are on the src path, you need cd..to return to the project path:

• Use the command to install the router, the old version is npm install vue-router, but the new version of vue3.0+router4.0 is recommended npm install vue-router@4 --save,
  
• Wait for the creation. After the execution is complete, click on the package.json file to check whether the router has been installed.

• If there is a problem that the installation cannot be installed, or there is an error in the installation, you can copy it to this place, and then run it "vue-router": "^4.0.14"in the command line . If there is no error, it means that the installation is successful.npm install

getting Started

• HTML

  1. router-link: Realize the jump between routes

• Use router-linkthe component to navigate

• toSpecify the link by passing<router-link>

• will render hrefa <a>tag with the correct attribute

• Instead of using <a>tags, a custom component is used router-linkto create the connection, so that Vue-Router can change the URL without reloading the page, and handle URL generation and encoding.
  
  Note: The feature of using push is to push a new page, then when the user clicks back, the previous page can be rolled back, but if we want the current page to be a replacement operation, then we can use replace, we can’t do it Back to operation.

  2. router-view: When the routing path matches the accessed address, the specified component will replace the router-view

• When the address meets the routing requirements, the routing components will be presented in your interface.

• Case:
  First create a subcomponent, login.vue, it is recommended to create a pages folder under the src folder to store components.
  
  Then write it in App.vue router-viewand delete the original content. Others do not need to be changed.
  
  Then add the route. It is recommended to create a new util folder under the src folder to build the js file. First, create the route file, router.js, and add the route. In this file, we have configured the route and finally need to be in main
  
  . js file to mount the route.
  
  Then use the running command: npm run serve
  
  After the operation is completed, press CTRL+click the left mouse button to open the page, which is displayed as follows:
  
  
  Here, the use of routing has almost been learned. In the next article, I will continue to write about the knowledge and application of routing. .