Если у пользователя есть текущая транзакция на веб-сайте, мы хотели бы, чтобы он продолжил с последней транзакции, чтобы обеспечить лучший пользовательский интерфейс.
Если пользователь регистрируется на веб-сайте, а затем покидает веб-сайт после выполнения какого-либо шага, мы можем гарантировать, что пользователь продолжит работу с того места, на котором остановился, даже если вкладка или браузер будет закрыта, а затем снова открыта.
В этой статье объясняется, как мы можем улучшить взаимодействие с пользователем в Vue js.
Во-первых, мы сохраним страницу, которую посетил пользователь, в localStorage, чтобы потом иметь возможность обрабатывать эту информацию. Последняя посещенная страница будет сохранена, если пользователь обновит страницу, закроет вкладку или закроет браузер.
Мы будем использовать навигационную защиту vue-router для хранения и обработки последней посещенной страницы.
Мы сохраняем последнюю посещенную страницу с помощью хука afterEach vue-router.
Здесь важно выполнять эту проверку только при первом доступе к нашему веб-сайту. Мы будем хранить, но не обрабатывать каждое изменение страницы после первого доступа.
Нам нужно проверить следующие две переменные, чтобы убедиться, что последняя посещенная страница может быть перенаправлена. Мы проверим это в хуке beforeEach vue-router.
- Первая переадресация завершена? : мы определяем начальное значение этой переменной как true, а затем меняем ее состояние, когда процесс перенаправления завершен.
- Существует ли последняя посещенная страница? : Он должен перейти на стандартную перенаправленную страницу, если нет последней посещенной страницы.
Мы создали глобальную переменную и назвали ее isFirstRedirect, которая по умолчанию имеет значение true, чтобы отслеживать, было ли выполнено первое перенаправление.
Мы получили последнюю посещенную страницу из localStorage и поместили ее в переменную lastVisitedPage. Результат перенаправления мы сохранили в переменной executableRedirect.
Если значение executableRedirect равно true, будет перенаправлена последняя посещенная страница. В противном случае будет использоваться стандартная перенаправленная страница.
Пример проекта находится в моей учетной записи GitHub, а демо — на netlify.
Первоначально опубликовано на heybooster