The reason

When I was learning, I encountered a problem. Here is the diagram of the navigation bar I wrote. Select mobile phone from all products, jump to the mobile phone product interface, and then select vegetables from the drop-down box on the product interface. The data on the page is not re-requested, and the data on the vegetable product interface is not obtained. The production interface uses the same component, and the data request logic is written in the created lifecycle function.

Preliminary solution

The following is a diagram of the link. Selecting the drop down box will change the Query parameter. Originally, the request is sent again according to the change of query parameter. So I wrote the following code to try to solve the problem, using watch to listen for changes in the path parameter, it changed, re-send the request, but invalid. This makes me confused. I hope some students can help me solve it

 computed:{
            id(){
                return this.$route.query.typeId
            }
        },
        watch:{
            id:{
                immediate:true,
                async handler(val)
                {
                    const data=await getProductInformation({product_type:val})
                    this.activityImg=data.data.type_picture_url
                    this.productsList=[]
                    for(let item of data.data.products)
                        this.productsList.push(item)
                }
            }
        },
Copy the code

alternative

Finally, I came up with a solution to replace it. The navigation drop-down box was written in the app-header component, and I wrote it like this.

if(! this.$route.path.includes('production')) { $router. Push ({productName:command. Type_name,typeId:command. {productName:command. Type_name,typeId:command. Id}}) window.location.reload()} this.$router.replace({name:' product ',query:{productName:command.Copy the code

If the current page path is not the product interface, it will jump to the product interface. If the current page is the product interface, it will force refresh to make the VUE component mount again and send the request again. This is the effect I wanted before. If there are deficiencies, please point out, I hope some students to answer my doubts.