>[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`组件。
