- [Передача входных параметров в компоненты маршрутов](essentials/passing-props.md)

Наконец, сторожевой хук можно указать и непосредственно в компоненте (том, что указан в конфигурации пути), используя следующие опции:

- `beforeRouteEnter`

- `beforeRouteUpdate` (добавлено в версии 2.2)

- `beforeRouteLeave`

beforeRouteUpdate (to, from, next) {

// вызывается когда маршрут, что рендерит этот компонент изменился,

// но этот компонент будет повторно использован в новом маршруте.

// Например, для маршрута с динамическими параметрами /foo/:id, когда мы

// перемещаемся между /foo/1 и /foo/2, экземпляр того же компонента Foo

// будет использован повторно, и этот хук будет вызван когда это случится.

// Также имеется доступ в `this` к экземпляру компонента.

},

beforeRouteLeave (to, from, next) {

props?: boolean | string | Function;

Хэш текущего пути (с символом `#`), если присутствует. В противном случае — пустая строка.

- **router.push(location, onComplete?, onAbort?)**

- **router.replace(location, onComplete?, onAbort?)**

- **router.addRoutes(routes)**

> 2.2.0+

Динамически добавить дополнительные маршруты в маршрутизатор. Аргументом должен быть массив маршрутов в таком же формате как и в опции `routes` конструктора.

- **router.onReady(callback)**

> 2.2.0+

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

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

По умолчанию активность ссылки устанавливается по стратегии **совпадения по включению**. Например, для `<router-link to="/a">` класс активности будет применён для всех ссылок, начинающихся с `/a/` или `/a`.

В версии 2.2.0+, можно указать опциональные `onComplete` и `onAbort` коллбеки в `router.push` или `router.replace` в качестве 2-го и 3-го аргументов. Эти коллбеки будут вызываться когда навигация либо успешно завершена (после того как все асинхронные хуки будут завершены), или прервана (переходом на этот же маршрут, или на другой маршрут прежде чем текущая навигация будет завершена), соответственно.

Использование `$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({

routes: [

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

]

})

Ссылка: `/search?q=vue` также передаст `{query: "vue"}` в качестве входных параметров в компонент SearchUser.

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

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

Для более продвинутого использования, смотрите [пример](https://github.com/vuejs/vue-router/blob/dev/examples/route-props/app.js).