# Vue學習#30 動態路由
###### tags: `Vue 直播班 - 2022 春季班`

## 動態路由

像是在購物網站上時常看到不同的產品，每個產品都有自己獨立的詳細資訊，這時我們可以把路由路徑帶入參數，在同一個頁面顯示不同產品的不同資訊

## 實作

### index.js 路由路徑放上參數

可以看到在 `/productInfor/:id` ， 多放上了 : 跟 id

`https://danny-1211.github.io/MyGuitar/#/productInfor/-N-EC4OtRS9wDtpBwq9U`

可以在網址上看到 `-N-EC4OtRS9wDtpBwq9U` 這個就是我們宣告的 id

### router-link 帶上參數


原本 router-link 用 to 來尋找路徑，由於帶上參數所以要用 to 要使用 v-bind 並把參數帶上路由

### 完成!


## 在頁面上抓到 router 宣告的參數

這一串就可以抓到囉! 記得 `id` 是我們在路由表自定義的名稱

## 提醒

1. 使用動態路由放上參數前一定要加 `:`
2. router-link 的 to 要使用 v-bind