this.$router.query詳解

一、什麼是this.$router.query

this.$router.query是Vue.js中路由器對象router的一個屬性，通過它可以獲取到當前路由的查詢參數。查詢參數指的是URL中以問號「?」開始的字元串，通常用來傳遞不同頁面之間的參數。例如，我們訪問一個URL：http://mywebsite.com/products?id=123&name=abc，其中id和name就是查詢參數。

二、如何使用this.$router.query

使用this.$router.query非常簡單，只需要在需要獲取參數的組件中調用即可。

  export default {
    created () {
      console.log(this.$router.query);
    }
  }

上述代碼中，我們在組件的created生命周期函數中列印出this.$router.query，即可獲取當前路由的查詢參數。通常情況下，我們不會直接使用this.$router.query，而是將其解構出來保存在data中：

  export default {
    data () {
      return {
        id: '',
        name: ''
      }
    },
    created () {
     const { id, name } = this.$router.query;
     this.id = id;
     this.name = name;
    }
  }

上述代碼中，我們通過解構this.$router.query，將id和name保存在組件的data屬性中，方便後續使用。

三、this.$router.query的注意事項

1. URL中的查詢參數需要進行編碼

任何URL中的特殊字元都需要進行編碼，否則可能會影響URL的解析和傳遞，造成一系列問題。例如上面提到的http://mywebsite.com/products?id=123&name=abc，在傳遞之前，需要對id和name進行編碼。Vue.js提供了內置函數encodeURIComponent來進行編碼：

  let id = 123;
  let name = 'abc';
  window.location.href = 'http://mywebsite.com/products?id=' + encodeURIComponent(id) + '&name=' + encodeURIComponent(name);

2. this.$route和this.$router的區別

this.$route和this.$router都是Vue.js中路由器對象router的屬性，但含義略有不同。this.$route表示當前路由信息對象，包括路徑、參數、查詢參數等等，而this.$router表示路由器對象，用來實現編程式導航。因此，this.$route.query和this.$router.query是不一樣的。

3. 查詢參數的類型問題

查詢參數從URL中解析出來之後，都會變成字元串類型，即使它本來是數字或者布爾類型的。因此，在使用查詢參數時，需要將其轉換為正確的類型，否則可能會造成一系列問題。例如：

  let id = this.$router.query.id; // '123'
  console.log(id + 1); // '1231'

上述代碼中，變數id的類型是字元串，因此對其進行加1操作時，實際上是字元串的拼接操作，不是數字的加法操作。正確的做法是將其轉換為數字類型：

  let id = parseInt(this.$router.query.id, 10); // 123
  console.log(id + 1); // 124

四、常見問題解答

1. 如何獲取路由參數而不是查詢參數？

路由參數指的是路徑中以冒號「:」開頭的變數。例如，路由路徑為/products/:id，表示id是一個路由參數。在路由跳轉時，可以通過this.$router.params獲取路由參數。例如：

  export default {
    created () {
      console.log(this.$route.params.id);
    }
  }

2. 如何在路由參數發生變化時重新渲染組件？

Vue.js提供了watch屬性來監聽data屬性或者路由參數的變化，從而實現自動重新渲染組件。例如，我們可以使用以下代碼來實現當路由參數id發生變化時，重新獲取商品詳情並渲染頁面：

  export default {
    data () {
      return {
        product: {}
      }
    },
    watch: {
      '$route.params.id' () {
        this.getProductDetail();
      }
    },
    methods: {
      getProductDetail () {
        // 獲取商品詳情
        // 更新組件的product屬性
      }
    },
    created () {
      this.getProductDetail();
    }
  }

3. 如何在路由參數不存在時顯示默認值？

在訪問某些頁面時，我們可能需要設置默認的查詢參數或者路由參數，以便提供更好的用戶體驗。下面的代碼演示了如何為查詢參數設置默認值：

  export default {
    data () {
      return {
        type: 'all'
      }
    },
    created () {
      const { type } = this.$router.query;
      if (type) {
        this.type = type;
      } else {
        this.$router.replace({ query: { type: this.type } });
      }
    }
  }

在上述代碼中，如果URL中沒有指定type查詢參數，則會自動跳轉到帶有默認type參數值的URL。