路由组件传参

观看 Vue School 的如何向路由组件传递 prop 的免费视频课程 (英文)

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

使用 props 将组件和路由解耦：

取代与 $route 的耦合

  1. const User = {
  2.   template: '<div>User {{ $route.params.id }}</div>'
  3. }
  4. const router = new VueRouter({
  5.   routes: [
  6.     { path: '/user/:id', component: User }
  7.   ]
  8. })

通过 props 解耦

  1. const User = {
  2.   props: ['id'],
  3.   template: '<div>User {{ id }}</div>'
  4. }
  5. const router = new VueRouter({
  6.   routes: [
  7.     { path: '/user/:id', component: User, props: true },
  9.     // 对于包含命名视图的路由，你必须分别为每个命名视图添加 `props` 选项：
  10.     {
  11.       path: '/user/:id',
  12.       components: { default: User, sidebar: Sidebar },
  13.       props: { default: true, sidebar: false }
  14.     }
  15.   ]
  16. })

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

布尔模式

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

对象模式

如果 props 是一个对象，它会被按原样设置为组件属性。当 props 是静态的时候有用。

  1. const router = new VueRouter({
  2.   routes: [
  3.     { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } }
  4.   ]
  5. })

函数模式

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

  1. const router = new VueRouter({
  2.   routes: [
  3.     { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) }
  4.   ]
  5. })

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

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

更多高级用法，请查看例子路由组件传参 - 图1。