Article Directory
1. Difference
- $ router is a VueRouter instance. If you want to navigate to a different URL, use the $ router.push method
- $ route is the current router jump object which can get name, path, query, params, etc.
Look at the icon:
You can see it by printing out both
- $ router contains history attribute, which can realize route jump
- $ route contains query, params attributes, the parameters passed in the jump route depend on these two
Two, $ router example
Click Home to jump to / home
Three, $ route example-jump route transfer parameters
1. Pass parameters in the params attribute of $ route
The following figure focuses on the red box
- The process of passing userId 'zhangsan' in App.vue to User.vue
- The code execution flow is the same
Show url effect
pass lisi over
2. The parameter passed in the query attribute in $ router
Focus on the red box
- From top to bottom is the code execution order
The displayed url effect
passes the name over
3. The difference between the parameters passed by the params and query attributes
Types of params
- Configure the routing format: / user /: id
- Delivery method: follow the corresponding value after the path
- The path formed after transmission: / user / 123, / user / abc
type of query
- Configure routing format: / user, common configuration
- Delivery method: The query key is used as the delivery method in the object
- The path formed after transmission: / user? Id = 123, / user? Id = abc
4. Note
Path in / after url, and query after?
- url format: protocol: // host: port / path? query (query)
- English format: scheme: // host: port / path? Query # fregment
