在Vue應用程序中，路由通常是一個不可避免的話題，因為它與不同組件的導航有關。Vue Router是Vue.js官方的路由管理庫，可以輕松管理多個視圖之間的導航。 路由通常需要根據傳入的參數進行動態加載，這就需要我們掌握基本的路由傳參技巧，而本文將介紹如何使用Vue Router傳遞id。

在Vue Router中，我們可以使用$route.params對象獲取路由參數（id）。例如，如果我們在路由中定義了一個參數名為“id”，我們可以使用$route.params.id來獲取傳遞的id。

const router = new VueRouter({
routes: [
{
path: '/user/:id',
component: UserProfile,
props: true
}
]
})

在此示例中，我們定義了一個路由參數名為“id”，并將其傳遞到UserProfile組件中。 最后一個屬性“props”決定是否將組件的$route.params作為props傳遞給組件。如果將其設置為true，則我們可以使用props：['id']來訪問該參數，否則$route.params將是我們可以訪問的唯一選項。

const UserProfile = {
template: '
User {{ id }}
',
props: ['id'],
created() {
console.log(this.id)
}
}

在此示例中，我們定義了一個單文件vue組件（SFC）。在組件定義中，我們定義了一個props接口，其中包含id屬性。實際上，在Vue組件中，Props是我們可以傳遞給組件的參數或數據。

現在，可以通過URL傳遞參數id，我們也可以通過編程方式將參數傳遞給組件。例如：

router.push({name: 'userProfile', params: { id: 123 }})

在此示例中，我們使用$router.push方法將params傳遞給一個名為“userProfile”的路由。

Vue Router配合axios使用時，路由傳參也是很常見的需求，尤其是在瀏覽器地址欄上無法顯示完整參數時，比如在參數中含有中文或其他特殊字符時。在這種情況下，我們可以將參數放在一個對象中傳遞，對象中的屬性就是我們要傳遞的參數，最后將整個對象作為路由傳參。

router.push({name: 'userProfile', query: {id: 123}})

在這個例子中，我們使用了一個名為“query”的對象來傳遞參數id。在$route中，我們可以訪問它們，如下所示：

this.$route.query.id

最后要注意的一點是，在路由傳參時，最好不要使用自動解碼，這可能會導致一些問題。為了解決這個問題，Vue.js提供了一個參數“encodeURIComponent”，您可以將其設置為正在傳輸的字符串，這將自動將url參數轉義為其他字符。