Передача свойств компонентам маршрута

Использование $route в вашем компоненте создаёт тесную связь с маршрутом, что ограничивает гибкость компонента, так как он может использоваться только на определённых URL.

Чтобы отвязать этот компонент от маршрутизатора, используйте опцию props:

Вместо связи с $route:

const User = {
  template: '<div>User {{ $route.params.id }}</div>'
}
const router = new VueRouter({
  routes: [{ path: '/user/:id', component: User }]
})

Отвяжите его, используя props

const User = {
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const router = new VueRouter({
  routes: [
    { path: '/user/:id', component: User, props: true },

    // for routes with named views, you have to define the `props` option for each named view:
    {
      path: '/user/:id',
      components: {
        default: User,
        sidebar: Sidebar
      },
      props: {
        default: true,
        // function mode, more about it below
        sidebar: route => ({ search: route.query.q })
      }
    }
  ]
})

Это позволяет использовать компонент в любом месте, что делает его проще в повторном использовании и тестировании.

Режим булевых значений

Когда props установлено в true, route.params будет установлено в качестве свойств компонента.

Режим объектов

Когда props является объектом, это будет установлено как свойства компонента как есть. Полезно для случаев, когда свойства являются статическими.

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

Режим функций

Вы можете создать функцию, которая возвращает свойства. Это позволяет преобразовывать параметры в другие типы, комбинировать статические значения со значениями, основанными на маршруте, и т.д.

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

URL /search?q=vue передаст {query: 'vue'} как свойства компоненту SearchUser.

Старайтесь сохранять функцию props без состояния, так как она оценивается только при изменении маршрута. Используйте компонент-обёртку, если вам нужно состояние для определения свойств, таким образом Vue сможет реагировать на изменения состояния.

Для расширенного использования ознакомьтесь с примером.