在Vue中，用路由傳值可以將數據從一個組件傳遞到另一個組件。Vue的路由器(route)允許我們定義應用的不同URL路徑所對應的組件。在訪問這些URL時，路由器會渲染相應的組件。除了URL路徑的匹配，路由器還提供了一些額外的特性，例如路由傳遞參數。路由傳遞參數可以通過URL傳遞參數、查詢參數以及路由路徑參數來實現。

// 定義路由
const router = new VueRouter({
routes: [
// 帶參數的路由
{ path: '/my-component/:id', component: MyComponent }
]
})

在這個例子中，我們使用了路由路徑參數，它使用冒號來表示，后面跟上我們定義的參數名稱（這個例子中是id）。這個路由定義了一個名為MyComponent的組件，同時還定義了一個route參數：id。

我們可以在組件中通過$router對象的params屬性來訪問參數。例如，在MyComponent組件中，我們可以使用以下代碼訪問傳遞的ID參數。

// my-component.vue
export default {
mounted () {
console.log(this.$route.params.id)
}
}

通過這種方式，我們可以將參數從一個組件傳遞到另一個組件。例如，在一個商品列表中，我們可能會使用類似以下的代碼來跳轉到商品詳情頁面，并傳遞商品的ID參數：

// product-list.vue
export default {
methods: {
goToProduct (id) {
this.$router.push({ name: 'product-details', params: { id: id }})
}
}
}

這個函數調用了$router.push()方法，并傳遞了一個名為name的路由名稱（這個名稱對應著我們之前定義的路由），以及一個params對象，該對象包含我們想要傳遞的ID參數。當這個函數被觸發時，它將跳轉到具有該名稱的路由，并將參數傳遞給目標組件。

還有一種方法可以傳遞參數，那就是通過查詢參數進行傳遞。查詢參數是在URL路徑后面添加的鍵/值對，例如： http://example.com/path?foo=bar&baz=qux 在Vue中，我們可以使用$router對象的query屬性來訪問查詢參數。例如，在我們的商品列表組件中，我們可以使用以下代碼獲取查詢參數：

// product-list.vue
export default {
mounted () {
console.log(this.$route.query)
}
}

我們可以通過以下方式從一個組件傳遞查詢參數：

// product-list.vue
export default {
methods: {
goToProduct (id) {
this.$router.push({ name: 'product-details', query: { id: id }})
}
}
}

這個函數調用了$router.push()方法，并傳遞了一個名為name的路由名稱（這個名稱對應著我們之前定義的路由），以及一個query對象，該對象包含我們想要傳遞的ID參數。當這個函數被觸發時，它將跳轉到具有該名稱的路由，并將參數作為查詢參數傳遞給目標組件。

總結起來，Vue的路由器(route)提供了一種方法，使我們可以通過定義URL路徑的不同來顯示不同的組件，并通過路由傳遞參數在這些組件之間傳遞數據。這使得我們的應用程序更加靈活和可擴展。