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

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

Мы можем заменить

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

на

const User = {
  // make sure to add a prop named exactly like the route param
  props: ['id'],
  template: '<div>User {{ id }}</div>'
}
const routes = [{ path: '/user/:id', component: User, props: true }]

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

Режим boolean

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

Именованные представления

Для маршрутов с именованными представлениями необходимо определить опцию props для каждого именованного представления:

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

Режим object

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

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

Режим function

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

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

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

Старайтесь, чтобы функция props была бессостоятельной, так как она оценивается только при изменении маршрута. Используйте оберточный компонент, если вам нужна состяние для определения свойств, таким образом vue может реагировать на изменения состояния.

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