Vue监听路径，从新请求数据

原因

在学习的时候遇到一个问题，以下是我写的导航栏的示意图。在全部产品中选取手机，跳转到手机产品界面，而后再产品界面在下拉框中选取蔬菜，页面上的数据没有从新请求，没有获取到蔬菜产品界面的数据。产品界面使用的都是同一个组件，数据请求逻辑写在created生命周期函数中。

初步解决方案

如下是连接的示意图，选取下拉框会改变query参数，本意时根据query参数的改变从新发请求,可是因为请求是写在生命周期函数中的，在只改变路径参数的状况下，vue组件没有被销毁，因此没有从新调用生命周期函数。因此我写了如下代码来尝试解决问题，用watch去监听路径参数的变化，发生变化了，从新发请求，可是无效。这让我产生了疑惑，但愿有同窗能帮我解决一下

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)
                }
            }
        },
复制代码

替代方案

最后仍是想了一个解决方案来替代它，导航的下拉框是写在app-header组件中的，我采用了这样的写法。

if(!this.$route.path.includes('production'))
       {
                    this.$router.push({name:'产品',query:{productName:command.type_name,typeId:command.id}})

      }
     else
	{
                    this.$router.replace({name:'产品',query:{productName:command.type_name,typeId:command.id}})
                    window.location.reload()
       }
复制代码

就是下拉框点击选项会触发这个函数，若是当前页面路径不是产品界面，就跳转到产品界面，若是当前页面是产品界面，就强制刷新来使得vue组件从新挂载，从新发请求，这样就是实现了我以前想要的效果。若是有不足的地方，请你们指出，但愿有同窗解答一下个人疑惑。