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

Если пользователь регистрируется на веб-сайте, а затем покидает веб-сайт после выполнения какого-либо шага, мы можем гарантировать, что пользователь продолжит работу с того места, на котором остановился, даже если вкладка или браузер будет закрыта, а затем снова открыта.

В этой статье объясняется, как мы можем улучшить взаимодействие с пользователем в Vue js.

Во-первых, мы сохраним страницу, которую посетил пользователь, в localStorage, чтобы потом иметь возможность обрабатывать эту информацию. Последняя посещенная страница будет сохранена, если пользователь обновит страницу, закроет вкладку или закроет браузер.

Мы будем использовать навигационную защиту vue-router для хранения и обработки последней посещенной страницы.

Мы сохраняем последнюю посещенную страницу с помощью хука afterEach vue-router.

Здесь важно выполнять эту проверку только при первом доступе к нашему веб-сайту. Мы будем хранить, но не обрабатывать каждое изменение страницы после первого доступа.

Нам нужно проверить следующие две переменные, чтобы убедиться, что последняя посещенная страница может быть перенаправлена. Мы проверим это в хуке beforeEach vue-router.

  • Первая переадресация завершена? : мы определяем начальное значение этой переменной как true, а затем меняем ее состояние, когда процесс перенаправления завершен.
  • Существует ли последняя посещенная страница? : Он должен перейти на стандартную перенаправленную страницу, если нет последней посещенной страницы.

Мы создали глобальную переменную и назвали ее isFirstRedirect, которая по умолчанию имеет значение true, чтобы отслеживать, было ли выполнено первое перенаправление.

Мы получили последнюю посещенную страницу из localStorage и поместили ее в переменную lastVisitedPage. Результат перенаправления мы сохранили в переменной executableRedirect.

Если значение executableRedirect равно true, будет перенаправлена ​​последняя посещенная страница. В противном случае будет использоваться стандартная перенаправленная страница.

Пример проекта находится в моей учетной записи GitHub, а демо — на netlify.

Первоначально опубликовано на heybooster