Vue中 path + query 傳參的坑（參數類型變化）

Vue中 path + query 傳參的坑

一、概述

在我們使用Vue中 path + query 方式傳參的時候，這裏存在一些坑或者說是現象（參數類型因爲刷新而變化），記錄一下，供大家學習。

---

二、使用場景

我們在使用Vue中 path + query 方式傳參的時候，可以使用參數中的某一個作爲區分新增與編輯的標識。就我的個人習慣而言，我通常會傳參數0爲新增，具體的非0參數爲編輯（後端中主鍵是不能爲零的）。

---

三、代碼分析

    this.getDistributorsList();
    //注意數據類型的轉換，在進進入新增頁面的時候，路由中的ruleid，其實爲string類型，刷新之後，會執行加載規則詳情的函數，這點事不符合要求的。
    console.log(typeof(this.$route.query.ruleid))
    this.ruleDetailsParameter.ruleid = Number(this.$route.query.ruleid);
    console.log(this.$route.query.ruleid,'3333333333333')
    if (this.ruleDetailsParameter.ruleid) {
        this.getRuleDetails();
    }

邏輯闡述：地址欄鏈接爲 www.baidu.com/intergralRules?ruleid=0在判斷接收的 ruleid 爲 0 的時候，編輯新增，不調用詳情接口 getRuleDetails；反之，調用詳情接口getRuleDetails。

---

四、坑點

坑點：在進入新增頁面的時候，ruleid = 0 0 此時number類型；但是，刷新之後，變成了string類型，此時下面的判斷就不太嚴謹了，出現了錯誤判斷。

---

五、解決方式

解決方式：根據需要，在created 鉤子中，我們首先轉化接收的變量爲我們需要的變量類型（我這裏把參數轉化爲number類型）