路由组件传参

在组件中使用$route会使之与其对应路由形成高度耦合，从而使组件只能在某些特定的 URL 上使用，限制了其灵活性。使用props将组件和路由解耦：

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}

const routes = [
    {
        path: '/user/:id',
        component: User,
    }
]

替换成

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}

const routes = [
    {
        path: '/user/:id',
        component: User,
        props: true
    }
]

这样你便可以在任何地方使用该组件，使得该组件更易于重用和测试。

布尔模式

如果props被设置为true，route.params将会被设置为组件props。

命名视图

对于有命名视图的路由，你必须为每个命名视图定义props配置：

// user.vue
<route-view />
<route-view name="sidebar" />

const routes = [
  {
    path: '/user/:id',
    components: { default: User, sidebar: Sidebar },
    props: { default: true, sidebar: false }
  }
]

对象模式

当props是一个对象时，它将原样设置为组件props。当props是静态的时候很有用。

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

函数模式

你可以创建一个函数返回props。这样你便可以将参数转换成另一种类型，将静态值与基于路由的值结合等等。

const routes = [
  {
    path: '/search',
    component: SearchUser,
    props: route => ({ query: route.query.q })
  }
]

URL /search?q=vue会将{query:'vue'}作为属性传递给SearchUser组件。

请尽可能保持props函数为无状态的，因为它只会在路由发生变化时起作用。如果你需要状态来定义props，请使用包装组件，这样 Vue 才可以对状态变化做出反应。