Jump to the same page of Vue

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!


won't the navigation of the programmer you write report an error? The symbol "}" is missing after


when using param, the route is written as follows:

 {
    name: 'product',
    path: '/product/:productId',
    component: productDetail
 }

query is introduced using path, and params is introduced with name.

Menu