Пост Как перерендерить маршрут Vue при изменении параметров пути впервые появился на Qvault.

В одностраничных приложениях, использующих Vue Router, обычно создается параметр пути, который изменяет поведение маршрута. Распространенная проблема возникает, когда пользователь вручную изменяет путь в адресной строке. Изменение URL-адреса вручную не приводит к повторному отображению представления! Это может привести к неожиданному поведению, поскольку хуки mounted() не срабатывают, а вложенные компоненты не перезагружаются.

Как это исправить

Решение — использовать другой хук — beforeRouteUpdate(). Возьмем пример Игровой площадки Qvault. Последний параметр в пути Playground — это кодовый язык, js или go. Если шаблонный код извлекается только с помощью хука mounted(), то когда пользователь изменяет параметр пути, шаблонный код не перезагружается.

Причина того, что он выполняет перезагрузку, заключается в том, что Qvault SPA также имеет следующий хук beforeRouteUpdate():

beforeRouteUpdate (to, from, next) {
  this.lang = to.params.lang;
  this.setCode();
  next();
}

Согласно документам, хук получает три параметра:

  • to: целевой Объект маршрута, к которому осуществляется переход.
  • from: текущий маршрут, от которого отклоняются.
  • next: эта функция должна быть вызвана для разрешения хука. Действие зависит от аргументов, предоставленных next:
  • next(): перейти к следующему хуку в конвейере. Если крючков не осталось, навигация подтверждена.
  • next(false): прервать текущую навигацию. Если URL-адрес браузера был изменен (либо вручную пользователем, либо с помощью кнопки «Назад»), он будет сброшен на URL-адрес маршрута from.
  • next('/') или next({ path: '/' }): перенаправить в другое место. Текущая навигация будет прервана и начнется новая. Вы можете передать любой объект местоположения в next, что позволяет указать такие параметры, как replace: true, name: 'home' и любой параметр, используемый в router-link’s to prop или router.push
  • next(error): (2.4.0+) если аргумент, переданный в next, является экземпляром Error, навигация будет прервана, и ошибка будет передана обратным вызовам, зарегистрированным через router.onError().

В случае с Qvault Playground мы просто делаем ту же операцию, что и хук mounted(): мы проверяем язык и извлекаем шаблонную пластину.

Спасибо за чтение

Подпишитесь на нас в Твиттере @q_vault, если у вас есть какие-либо вопросы или комментарии

Пройдите игровые курсы кодирования в Qvault Classroom

Подпишитесь на нашу рассылку, чтобы получать больше образовательных статей

Пост Как перерендерить маршрут Vue при изменении параметров пути впервые появился на Qvault.