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組件從新掛載，從新發請求，這樣就是實現了我以前想要的效果。若是有不足的地方，請你們指出，但願有同窗解答一下個人疑惑。