Redirect parameter transfer of vue-router
1. When vue-router does nested routing, you can already receive the value when you jump to the product page, but I want to jump to the default ProA. After redirect redirection, I can jump to the ProA page, but product can"t get the value passed, for example, the value of id. How to solve this situation?
routes: [{
path: "/",
name: "Index",
component: Index
},
{
path: "/product/:id",
name: "Product",
redirect: "/product/:id/producta",
component: Product,
children: [{
path: "producta",
name: "ProA",
component: ProA
}, {
path: "productb",
name: "ProB",
component: ProB
}, {
path: "productc",
name: "ProC",
component: ProC
}]
}
]
routes: [{
path: '/',
name: 'Index',
component: Index
},
{
path: '/product/:id',
name: 'Product',
redirect: '/product/producta/:id',
component: Product
},
{
path: '/product/producta/:id',
name: 'ProA',
component: ProA
}, {
path: '/product/productb',
name: 'ProB',
component: ProB
}, {
path: '/product/productc',
name: 'ProC',
component: ProC
}
]
first of all, because id is the value of PathValue,'/product/:id','/ product/:id/producta',id, you can get it.
and other properties, you can pass parameters in the following two ways.
passes parameters in the way of params.
routes: [
{
path: '/product/:id',
name: 'Product',
// 1.
redirect: {name:'/product/:id/producta'},
component: Product,
children: [{
path: 'producta',
// 2.
name: '/product/:id/producta',
component: ProA
}]
}
]
//
this.$router.push({
name: '/product/:id/producta',
params: {
id: id,
other: other
}
})
you have to use query to pass parameters in this way, and the redirected page can get the parameters of query. Access / product/1?x=1, redirect back / product/1/producta?x=1.
routes: [
{
path: '/product/:id',
name: 'Product',
redirect: '/product/:id/producta',
component: Product,
children: [{
path: 'producta',
name: 'ProA',
component: ProA
}]
}
]
//
this.$router.push({
path: '/product/'+id,
query: {
other: other
}
})
