This blog will introduce in detail the method of passing parameters in Vue-router, and how to refresh the page parameters without losing them or splicing them into the URL.
3 ways for Vue-Router to carry parameter jumps
Vue-Router provides a variety of ways to pass parameters, as follows:
1. Parmas routing path parameters
When defining a route, you can add parameter placeholders in the routing path, for example: /user/:id.
What starts with : in the routing path is the parameter placeholder, and the parameter name is id. When matching this route, for example, accessing /user/1, the parameter id will be filled in the component's this.$route.params object.
2. Passing query parameters
The query parameter is passed with parameters after the URL, for example: /user?id=1.
Access query parameters in Vue-Router can be obtained through $route.query, for example:
const user_id = this.$route.query.id
3. Props passing parameters
In the routing component, parameters can be passed to the component through props. You need to set the props attribute in the routing configuration:
const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: User,
props: true
}
]
})
In this case, the parameter will be set to the component'sprops. For example, when accessing/user/1, the parameter id will be passed to the props of the component User. , which can be accessed via this.id.
- Get routing parameters inside the component
You can get routing parameters throughthis.$route.params or this.$route.query inside the component, and you can access them directly using $route inside the component. Routing information for the component.
- Pass parameters based on route name
To pass parameters through the route name, you need to set the name attribute when defining the route, for example:
const router = new VueRouter({
routes: [
{
path: '/user/:id',
name: 'user',
component: User
}
]
})
A route named user is defined here, which can then be accessed elsewhere through name, for example:
this.$router.push({
name: 'user',
params: {
id: 1
}
})
can obtain parameters through this.$route.params.