Query傳參是Vue中常用的一種參數傳遞方式。通過將參數附加到URL的查詢字符串中，我們可以在不同的組件之間共享數據并保持組件的獨立性。在Vue中，我們可以使用$route對象來讀取查詢字符串，并在組件中使用它們。

首先，我們需要在Vue的路由配置中定義一個路徑，以便我們可以從瀏覽器中訪問它。例如，我們可以定義一個名為"/search"的路徑，該路徑使用查詢字符串來搜索特定項目的詳細信息：

const router = new VueRouter({
routes: [
{ path: '/search', component: Search }
]
})

在這個路由中，我們定義了一個名為Search的組件（在下一段中詳細介紹）。當用戶訪問"/search"路徑時，我們將顯示這個組件。

接下來，我們需要在我們的Search.vue組件中定義邏輯來讀取和使用查詢字符串參數。我們可以通過$route對象來獲取查詢字符串。$route對象是Vue路由器的一個實例，它包含當前頁面的信息，例如路徑、查詢參數和哈希值。

export default {
name: 'Search',
data () {
return {
query: ''
}
},
created () {
this.query = this.$route.query.q || ''
}
}

在這個例子中，我們通過使用created生命周期鉤子來設置組件的初始狀態。我們使用$route.query對象來獲取查詢字符串的值，并將其存儲在組件的data對象中。請注意，“q”是我們在查詢字符串中使用的參數名稱。如果查詢字符串沒有指定“q”參數，則我們將設置初始值為空字符串。

現在，我們可以在Search.vue組件中使用存儲在查詢字符串中的參數。例如，我們可以定義一個用于搜索數據的計算屬性：

computed: {
results () {
// 搜索與查詢字符串匹配的數據
}
}

在這個計算屬性中，我們會在應用程序的數據中進行搜索，使用存儲在query變量中的查詢字符串來查找所有與查詢字符串匹配的數據。然后，我們將這些結果返回，以便我們可以在組件中使用它們。

Query傳參是Vue中一個非常實用的功能，可以用于實現搜索、分頁和排序等。通過在查詢字符串中傳遞數據，我們可以在不同的組件之間傳遞數據，同時保持組件的獨立性。在Vue中，我們可以使用$route對象來讀取查詢字符串，并在組件中使用它們。