>[success]路由組件傳參就是把路由參數當作Prop傳遞給組件
```
//組件中
const User = {
props: ['id'],
template: '<div>User {{ id }}</div>'
}
//路由配置
const router = new VueRouter({
routes: [
{ path: '/user/:id', component: User, props: true }, //props: true 表示路由參數將會作為prop傳入組件
// 對于包含命名視圖的路由，你必須分別為每個命名視圖添加 `props` 選項：
{
path: '/user/:id',
components: { default: User, sidebar: Sidebar },
props: { default: true, sidebar: false }
}
]
})
```
## 一： 布爾模式
如果`props`被設置為`true`，`route.params`將會被設置為組件屬性。
## 二：對象模式
如果`props`是一個對象，它會被按原樣設置為組件屬性。當`props`是靜態的時候有用。
~~~
const router = new VueRouter({
routes: [
{ path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
]
})
~~~
## 三： 函數模式
你可以創建一個函數返回`props`。這樣你便可以將參數轉換成另一種類型，將靜態值與基于路由的值結合等等。
~~~
const router = new VueRouter({
routes: [
{ path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
]
})
~~~
URL`/search?q=vue`會將`{query: 'vue'}`作為屬性傳遞給`SearchUser`組件。
