this.$route.params詳解

一、獲取路由參數

this.$route.params是Vue Router提供的一個屬性，它用來獲取路由參數。在路由路徑中包含動態參數時，我們可以通過此屬性來獲取它們的值。例如，我們定義了一個路由路徑為’/user/:id’，那麼我們就可以通過this.$route.params.id來獲取路由參數值。

二、傳遞參數

除了獲取參數，this.$route.params還可以用來傳遞參數。我們可以在路由跳轉時，通過params屬性來傳遞參數。例如：

this.$router.push({
  path: '/user',
  params: {
    id: '123'
  }
})

在這個例子中，我們通過$router實例的push方法跳轉到’/user’路徑，並且通過params屬性傳遞了一個’id’參數，它的值為’123’。在目標組件中，我們就可以通過this.$route.params.id來獲取這個參數。

三、監聽參數變化

有時候我們需要監聽路由參數變化，以便在參數改變時做出響應。我們可以通過$watch來監聽this.$route.params對象，以達到這個目的。例如：

watch: {
  '$route.params': function(newParams, oldParams) {
    console.log('參數變化了', newParams, oldParams)
  }
}

在這個例子中，我們在組件的watch選項中監聽了’$route.params’對象，當參數發生變化時，就會觸發回調函數。在回調函數中，我們可以獲取新舊參數，以便進行相應處理。

四、注意事項

使用this.$route.params時需要注意以下幾點：

1、僅在路由路徑中包含動態參數時才有值，否則它是一個空對象；

2、當路由參數變化時，因為組件已經存在，Vue不會銷毀和重新創建組件實例，因此不會觸發生命周期函數，需要手動監聽參數變化；

3、如果使用命名路由，那麼訪問參數的方式變為this.$route.params.[name]，其中name為路由名稱。

五、本文示例代碼

//路由定義
{
  path: '/user/:id',
  name: 'user',
  component: User
}

//路由跳轉
this.$router.push({
  name: 'user',
  params: {
    id: '123'
  }
})

//監聽參數變化
watch: {
  '$route.params': function(newParams, oldParams) {
    console.log('參數變化了', newParams, oldParams)
  }
}

//訪問參數值
console.log('參數值是：', this.$route.params.id)