Пост Как перерендерить маршрут 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
’sto
prop илиrouter.push
next(error)
: (2.4.0+) если аргумент, переданный вnext
, является экземпляромError
, навигация будет прервана, и ошибка будет передана обратным вызовам, зарегистрированным черезrouter.onError()
.
В случае с Qvault Playground мы просто делаем ту же операцию, что и хук mounted(): мы проверяем язык и извлекаем шаблонную пластину.
Спасибо за чтение
Подпишитесь на нас в Твиттере @q_vault, если у вас есть какие-либо вопросы или комментарии
Пройдите игровые курсы кодирования в Qvault Classroom
Подпишитесь на нашу рассылку, чтобы получать больше образовательных статей
Пост Как перерендерить маршрут Vue при изменении параметров пути впервые появился на Qvault.