路由的props配置可以让路由组件更方便地接收到参数。在组件中使用$route会让组件与路由紧耦合（使用组件必须配置路由）。通过props可以解除组件与路由的紧耦合。

注：使用props，让组件通过props接收参数，让路由通过props给组件传递参数。这样当组件被用在其它不使用路由的组件中时，组件依然可以通过props接收参数，而无需配置路由。

对象模式

当props是一个对象时，它将被作为组件的props，原封不动地被传递给组件props。在props为静态的时候可以使用这种方式。

1routes: [
2  {
3    path: '/promotion/from-newsletter',
4    component: Promotion,
5    props: { newsletterPopup: false }
6  }
7]

布尔模式

在路由中，给props设置一个为true的布尔值，路由会自动将当前的所有params通过props传递给组件。

例如User组件：

1export default new  VueRouter({
2  name: 'User',
3  props: ['id'],
4  /* ... */
5})

通过以下方式给User配置路由，并以props形式将params传递给User：

1routes: [
2  {
3    path: '/user/:id',
4    component: User,
5    props: true,  // 以 props 形式将 params 传递给 User 
6  }
7]

也就是说，当props设置为true时，$route.params将被设置为组件的props。

函数模式

将props设置为函数类型，可以在函数中定义传递给组件的props。这种方式可以包括将query、parmas作为props传递，传递静态的props等等。

函数模式的路由props，可以接收到一个route参数，这个参数的与其对应的路由组件实例中的$route类似，可以通过route.query和route.params获取Query参数和路径参数。

基本用法示例如下：

 1routes: [
 2  {
 3    path: '/searchUser',
 4    component: searchUser,
 5    props(route) {
 6      return {
 7        id: route.query.id,
 8        name: route.query.name,
 9      }
10    }
11  }
12]

props可以使用Lambda表达式定义：

 1routes: [
 2  {
 3    path: '/searchUsers',
 4    component: searchUsers,
 5    props: route => ({
 6      id: route.query.id,
 7      name: route.query.name,
 8    }),
 9  }
10]

props可以使用解构赋值或多重解构赋值：

1routes: [
2  {
3    path: '/searchUsers',
4    component: searchUsers,
5    props: ({query:{id, name}}) => ({id, name}),
6  }
7]

将所有的query和params作为props传递：

1routes: [
2  {
3    path: '/searchUsers',
4    component: searchUsers,
5    props: ({query, params}) => ({...query, ...params}),
6  }
7]