1. What is vue-router
- vue-router is the official routing solution given by vue.js. It can only be used in conjunction with vue projects, and can easily manage the switching of components in SPA projects.
2. The version of vue-router
- Vue-router currently has 3.x and 4.x versions. Among them:
⚫ vue-router 3.x can only be used in combination with vue2
⚫ vue-router 4.x can only be used in combination with vue3 - The official document address of vue-router 3.x
- The official document address of vue-router 4.x
3. Basic usage steps of vue-router 4.x
① Install vue-router in the project
② Define routing components
③ Declare routing links and placeholders
④ Create routing modules
⑤ Import and mount routing modules
3.1 Install vue-router in the project
- In vue3 projects, only vue-router 4.x can be installed and used. The command to install is as follows:
3.2 Define routing components
- Define three components MyHome.vue, MyMovie.vue, and MyAbout.vue in the project. In the future, vue-router will be used to control their display and switching:
3.3 Declaring routing links and placeholders
- You can use labels to declare route links and use labels to declare route placeholders. The sample code is as follows:
3.4 Create a routing module
- Create a router.js routing module in the project, and follow the following 4 steps to create and get the routing instance object:
① Import two methods from vue-router as needed
② Import components that need to use routing control
③ Create routing instance objects
④ Share the routing instance object outward
⑤ Import and mount the routing module in main.js
3.4.1 Import two methods on demand from vue-router
3.4.2 Import components that need to use routing control
3.4.3 Create a routing instance object
3.4.4 Outward shared routing instance object
3.4.5 Import and mount the routing module in main.js
