<commit_before># Передача входных параметров в компоненты маршрутов

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

Для разделения компонента от маршрутизатора можно использовать входные данные:

**❌ Жёсткая связь с $route**

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

**👍 Разделение с помощью входных параметров**

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

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

### Булево значение

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

### Объект

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

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

### Функция

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

``` js
const router = new VueRouter({<commit_msg>[Just Merge Me] Russian Translation Update (#1203)<commit_after># Передача входных параметров в компоненты маршрутов

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

Для разделения компонента от маршрутизатора можно использовать входные данные:

**❌ Жёсткая связь с $route**

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

**👍 Разделение с помощью входных параметров**

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

    // для маршрутов с именованными представлениями, необходимо указывать опцию props для каждого именованного представления:
    {
      path: '/user/:id',
      components: { default: User, sidebar: Sidebar },
      props: { default: true, sidebar: false }
    }
  ]
})
```

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

### Булево значение

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

### Объект

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

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

### Функция

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

``` js
const router = new VueRouter({
{'fraction_non_alphanumeric': 0.10922946655376799, 'fraction_numerical': 0.0011289867344058708, 'mean_word_length': 4.469135802469136, 'pattern_counts': {'":': 0, '<': 11, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '3205059', 'n_tokens_mistral': 1314, 'n_tokens_neox': 1505, 'n_words': 396}