Hooks leave

В библиотеке Navigo маршруты можно настраивать не только для обработки переходов на определённые URL, но и для управления логикой выхода с маршрута. Для этого используется hook leave. Он позволяет выполнять определённые действия перед тем, как пользователь покидает текущий маршрут, например, проверку состояния формы, сохранение данных или отмену перехода при несохранённых изменениях.

router.on('/profile', {
  leave: (done, params, current) => {
    if (!confirm('Вы уверены, что хотите покинуть страницу?')) {
      done(false); // Отмена перехода
    } else {
      done(); // Разрешение перехода
    }
  }
});

В этом примере функция leave получает три аргумента:

  • done – функция обратного вызова, которую необходимо вызвать для разрешения или отмены перехода. Если вызвать done(false), переход будет остановлен.
  • params – объект с параметрами текущего маршрута, аналогичный тому, что используется в on при обработке маршрута.
  • current – объект, содержащий информацию о текущем маршруте, включая путь, имя маршрута и состояние.

Асинхронная обработка внутри leave

Hook leave поддерживает асинхронные операции, что позволяет, например, отправлять запрос на сервер или показывать модальное окно для подтверждения выхода. В этом случае вызов done следует делать после завершения асинхронной операции.

router.on('/settings', {
  leave: async (done, params, current) => {
    try {
      const result = await showConfirmationDialog('Сохранить изменения перед выходом?');
      if (result === 'cancel') {
        done(false);
      } else {
        await saveSettings(); 
        done();
      }
    } catch (err) {
      console.error(err);
      done(false);
    }
  }
});

Использование async/await делает код более читаемым и позволяет легко интегрировать промисы в логику выхода с маршрута.

Комбинирование leave с другими хуками

leave можно использовать вместе с хуками before и after, создавая полную цепочку контроля маршрута:

  • before – вызывается перед попыткой перехода на маршрут.
  • leave – вызывается перед уходом с текущего маршрута.
  • after – вызывается после успешного перехода на маршрут.

Пример комплексного использования:

router.on('/dashboard', {
  before: (done, params) => {
    console.log('Проверка прав доступа...');
    done();
  },
  leave: (done, params, current) => {
    if (unsavedChanges()) {
      alert('Есть несохранённые изменения!');
      done(false);
    } else {
      done();
    }
  },
  after: (params, current) => {
    console.log('Переход на dashboard завершён.');
  }
});

В этом случае, если функция leave возвращает done(false), переход на новый маршрут не произойдёт, несмотря на успешное выполнение before на новом маршруте.

Масштабирование логики leave для нескольких маршрутов

Для удобства можно назначать общий leave для нескольких маршрутов с помощью wildcard или группы:

router.on(['/profile', '/settings', '/account'], {
  leave: (done, params, current) => {
    if (hasUnsavedChanges()) {
      if (!confirm('Есть несохранённые изменения. Продолжить?')) {
        done(false);
        return;
      }
    }
    done();
  }
});

Таким образом, один обработчик управляет выходом сразу с нескольких маршрутов, что упрощает поддержку приложения с большим количеством страниц.

Советы по использованию

  • Не блокировать UI на долгое время – асинхронные операции в leave должны быть быстрыми, иначе пользователь почувствует задержку при переходе.
  • Всегда вызывать done – даже если переход отменяется, вызов done(false) обязателен, иначе переход может зависнуть.
  • Использовать params и current – для проверки состояния конкретного маршрута и передачи информации в логику выхода.
  • Минимизировать побочные эффекты – изменения DOM или состояния приложения в leave должны быть безопасными, чтобы не нарушить навигацию.

Примеры реальных кейсов

  1. Подтверждение выхода с формы: предотвращение потери данных при незавершённой заполненной форме.
  2. Очистка временных данных: удаление кеша или временных значений перед уходом с маршрута.
  3. Логирование действий пользователя: отслеживание переходов между страницами для аналитики.

Использование hook leave в Navigo обеспечивает гибкий контроль над навигацией, повышая надёжность приложений и предотвращая нежелательные потери данных.

Оглавление