Explain the \router and \route in vue
this.$router.push('/path/') is
only one of the attributes for jump routing push, so I won’t introduce them here
this.$route can get the parameters we passed and the dynamic route id
params
query
We can first understand the relationship between the two as:
Router is all the routes we currently configure, and route is one of the routes that is active
this.$router
- During the configuration process, all routes are stored in the router object
- By passing
this.$router.push('/路径/'), we can make a route jump and add this route to the history stack - The router object here is essentially a VueRouter instance
this.$route
The popular understanding is which route is currently active, and which route is taken out
Way of passing parameters
When we are making a route jump, we may want to pass some parameters. Vue officials also give two ways
- params
- query
params
First of all, we need to be clear about a concept, what is their essence, here we introduce a concept: dynamic routing
We generally write a route for a component, but when we deal with the user interface, the route is often uncertain, so we hope that the routing of the route can be dynamically changed, such as the following path: a large number of user IDs are behind
/user/mary
/user/kris
Let's implement it, instead of <router-link</router-link in vue
We are under the router fileindex.jsConfigure first
After configuration, we need to goAPP.viewWrite a method of passing parameters in
By splicing strings, we click the user button, execute the btnUser method, and jump to the user interface
But at this time we have not configured the user interface, let’s render it
It will be used here this.$route, the user interface route is currently the most active route (in use), we can get the userId parameter
query
Routing configuration format: normal configuration
router/index.js
View appWrite in js method
Profile.vueGet the passed object and render
