|
| 1 | +# Передача входных параметров в компоненты маршрутов |
| 2 | + |
| 3 | +Использование `$route` в вашем компоненте создаёт жёсткую связь с маршрутом, что ограничивает гибкость компонента, потому что он может быть использован только для определённых URL-адресов. |
| 4 | + |
| 5 | +Для разделения компонента от маршрутизатора можно использовать входные данные: |
| 6 | + |
| 7 | +**❌ Жёсткая связь с $route** |
| 8 | + |
| 9 | +``` js |
| 10 | +const User = { |
| 11 | + template: '<div>User {{ $route.params.id }}</div>' |
| 12 | +} |
| 13 | +const router = new VueRouter({ |
| 14 | + routes: [ |
| 15 | + { path: '/user/:id', component: User } |
| 16 | + ] |
| 17 | +}) |
| 18 | +``` |
| 19 | + |
| 20 | +**👍 Разделение с помощью входных параметров** |
| 21 | + |
| 22 | +``` js |
| 23 | +const User = { |
| 24 | + props: ['id'], |
| 25 | + template: '<div>User {{ id }}</div>' |
| 26 | +} |
| 27 | +const router = new VueRouter({ |
| 28 | + routes: [ |
| 29 | + { path: '/user/:id', component: User, props: true } |
| 30 | + ] |
| 31 | +}) |
| 32 | +``` |
| 33 | + |
| 34 | +Это позволяет использовать компонент в любом месте, а также делает его проще для повторного использования и тестирования. |
| 35 | + |
| 36 | +### Булево значение |
| 37 | + |
| 38 | +Когда `props` установлены в `true`, значение `route.params` будут установлены входными параметрами компонента. |
| 39 | + |
| 40 | +### Объект |
| 41 | + |
| 42 | +Когда `props` объект, они будут установлены входными параметрами компонента как есть. |
| 43 | +Полезно когда входные параметры являются статическими данными. |
| 44 | + |
| 45 | +``` js |
| 46 | +const router = new VueRouter({ |
| 47 | + routes: [ |
| 48 | + { path: '/promotion/from-newsletter', component: Promotion, props: { newsletterPopup: false } } |
| 49 | + ] |
| 50 | +}) |
| 51 | +``` |
| 52 | + |
| 53 | +### Функция |
| 54 | + |
| 55 | +Вы можете создать функцию, которая вернёт объект с входными параметрами. |
| 56 | +Это позволяет вам приводить параметры к другому типу, комбинировать статические значения с значениями из маршрута, и т.д. |
| 57 | + |
| 58 | +``` js |
| 59 | +const router = new VueRouter({ |
| 60 | + routes: [ |
| 61 | + { path: '/search', component: SearchUser, props: (route) => ({ query: route.query.q }) } |
| 62 | + ] |
| 63 | +}) |
| 64 | +``` |
| 65 | + |
| 66 | +Ссылка: `/search?q=vue` также передаст `{query: "vue"}` в качестве входных параметров в компонент SearchUser. |
| 67 | + |
| 68 | +Старайтесь держать функции генерации входных параметров независимыми от состояния, потому что они вызываются только при изменениях маршрута. |
| 69 | +Используйте компонент обёртку, если вам нужно состояние для определения входных параметров, в таком случае Vue сможет реагировать на изменения состояния. |
| 70 | + |
| 71 | +Для более продвинутого использования, смотрите [пример](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js). |
0 commit comments