With parameters:
The parameter passing method can be divided into params parameter passing and query parameter passing, and params parameter passing can be divided into displaying parameters in the url and not displaying parameters
1. Params parameter passing (display parameters) can be divided into two ways: declarative and programmatic
Declarative router-link: This method is implemented through the to attribute of the router-link component, and the sub-routes need to be configured with parameters in advance
<router-link :to="/child/1"> 跳转到子路由 </router-link>
{
path: '/child/:id',
component: Child
}
Programmatic this.$router.push: It is also necessary to configure the parameters of the sub-routes in advance.
{
path: '/child/:id',
component: Child
}
this.$router.push({
path:'/child/${id}',
})
接收: this.$route.params.id2. Params parameter passing (parameters are not displayed) can also be divided into two ways: declarative and programmatic. The difference from displaying parameters is that here the value is passed through the alias name of the route
<router-link :to="{name:'Child',params:{id:1}}">跳转到子路由</router-link>
{
path: '/child,
name: 'Child',
component: Child
}
this.$router.push({
name:'Child',
params:{
id:1
}
})
接收: this.$route.params.id3. query parameter passing (display parameters) can also be divided into declarative and programmatic methods
Declarative router-link: This method is implemented through the to attribute of the router-link component, but when using this method to pass values, the sub-router needs to configure the routing alias in advance
{
path: '/child,
name: 'Child',
component: Child
}
<router-link :to="{name:'Child',query:{id:1}}">跳转到子路由</router-link>
Programmatic this.$router.push: When using this method to pass values, the sub-router also needs to configure the routing alias (name attribute) in advance
{
path: '/child,
name: 'Child',
component: Child
}
this.$router.push({
name:'Child',
query:{
id:1
}
})
接收: this.$route.query.id