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

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

对象模式

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

routes: [
  {
    path: '/promotion/from-newsletter',
    component: Promotion,
    props: { newsletterPopup: false }
  }
]

布尔模式

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

例如User组件：

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

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

routes: [
  {
    path: '/user/:id',
    component: User,
    props: true,  // 以 props 形式将 params 传递给 User 
  }
]

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

函数模式

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

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

基本用法示例如下：

routes: [
  {
    path: '/searchUser',
    component: searchUser,
    props(route) {
      return {
        id: route.query.id,
        name: route.query.name,
      }
    }
  }
]

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

routes: [
  {
    path: '/searchUsers',
    component: searchUsers,
    props: route => ({
      id: route.query.id,
      name: route.query.name,
    }),
  }
]

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

routes: [
  {
    path: '/searchUsers',
    component: searchUsers,
    props: ({query:{id, name}}) => ({id, name}),
  }
]

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

routes: [
  {
    path: '/searchUsers',
    component: searchUsers,
    props: ({query, params}) => ({...query, ...params}),
  }
]