query 和 params 是 Vue Router 中傳遞路由參數的兩種不同方式。它們的主要區別在于 URL 結構和獲取參數的方法。

1. params

params 是用來傳遞路由路徑中的動態參數。這些參數在路由路徑中以冒號 (:) 表示。

路由配置：

{path: '/interviewApplication/:backpackId',name: 'interviewApplication',component: InterviewApplicationComponent
}

跳轉代碼：

this.$router.push({name: 'interviewApplication',params: { backpackId: item.backpackId }
});

獲取參數： 在 InterviewApplicationComponent 中，你可以通過 this.$route.params.backpackId 獲取傳遞的參數。

URL 示例：

http://localhost:8080/interviewApplication/123

2. query

query 是用來傳遞查詢參數，這些參數附加在 URL 路徑的后面，格式類似于 URL 中的查詢字符串。

路由配置：

{path: '/interviewApplication',name: 'interviewApplication',component: InterviewApplicationComponent
}

跳轉代碼：

this.$router.push({path: 'interviewApplication',query: { backpackId: item.backpackId }
});

獲取參數： 在 InterviewApplicationComponent 中，你可以通過 this.$route.query.backpackId 獲取傳遞的參數。

URL 示例：

http://localhost:8080/interviewApplication?backpackId=123

總結

• URL 結構：

  • params：參數作為路徑的一部分。
  • query：參數作為查詢字符串的一部分。

• 獲取參數的方法：

  • params：通過 this.$route.params。
  • query：通過 this.$route.query。

• 使用場景：

  • 如果參數是資源的標識符并且應該是路徑的一部分，使用 params。
  • 如果參數是可選的或用于過濾、排序等，使用 query。

根據具體需求選擇合適的方式。