problem description
after clicking on another product, jump to this page to show the routing router-link component to property used
< router-link: to= "{name: "product", params: {productId:anotherProductId}}" >
the environmental background of the problems and what methods you have tried
1. Use programmatic navigation
this.$router.push({name: "product", params:{productId:anotherProductId}});
failed
2. Use query to pass parameters
this.$router.push({name: "product", query:{productId:anotherProductId}})
success
related codes
{
name: "product",
path: "/product",
component: productDetail
}
watch: {
"$route.params.productId"(){ /*id data*/
this.productId = this.$route.params.productId;
}
}
data(){
return(){
this.productId = this.$route.params.productId; /*id id */
}
}
what result do you expect? What are you trying to figure out?
using params, you can also listen to"$route.params.productid" to change the current product id to successfully display the product information you want to display.
want to figure out why params doesn"t work and query displays correctly. Thank you, Daniel, please do not hesitate to give us your advice!