как мне вызвать "Вы уверены, что хотите покинуть страницу?" всплывающее окно в vue. js роутере? - PullRequest
Новая
       9

как мне вызвать "Вы уверены, что хотите покинуть страницу?" всплывающее окно в vue. js роутере?

0 голосов
/ 24 января 2020

Я создаю приложение vue. js. Мы бы хотели, чтобы всплывающее окно появлялось, когда пользователь пытается покинуть указанную c страницу. Всплывающее окно должно сказать «Вы уверены, что хотите покинуть страницу?» Я знаю, что могу реализовать что-то в хуке beforeRouteLeave компонента, но мне интересно, есть ли способ реализовать это в событии beforeEach маршрутизатора (т.е. не в компоненте). Причина, по которой я хотел бы использовать маршрутизатор, заключается в том, что beforeEach в маршрутизаторе, кажется, отвечает пользователю, вводящему другой путь в строке URL браузера, тогда как ловушка beforeRouteLeave на компоненте этого не делает. Тем не менее, у меня нет доступа к всплывающему окну в маршрутизаторе, тогда как у меня есть в компоненте (всплывающее окно будет просто частью шаблона).

Так что вопрос: как я могу вызвать всплывающее окно в роутере, прежде чем пользователь действительно покинет страницу?

Спасибо.

1 Ответ

0 голосов
/ 24 января 2020

Сначала вы можете назначить имя для каждого из ваших объектов маршрутов в массиве маршрутов внутри вашего маршрутизатора или в другом поле, например requiredConfirmation или что-то в этом роде, представьте, что у нас есть маршруты, подобные этому: 

routes : [
    {
    path : '/needconfirm',
    component : NeedConfirmToLeaveCom,
    name : 'needconfirm-route1'
  },
    {
    path : '/neednotconfirm',
    component : NeedNotConfirmToLeaveCom,
    name : 'normal-route1'
  },
]

затем Вы можете использовать router.beforeEach, чтобы установить некоторые условия или некоторые подтверждения на основе вашего исходного маршрута и маршрута назначения. что-то вроде этого: 

router.beforeEach((to,from,next) => {
  if(from.name.startsWith("needconfirm-")) {
    if(window.confirm("Are you sure you want to leave the page?")) {
      next();
    }
  }else next();
});

ОБНОВЛЕНИЕ *: если вы хотите использовать некоторые пользовательские компоненты для своего всплывающего окна, вы можете использовать vuex для хранения логики c вашего компонента и переключения и импорта этого компонента в ваше приложение. Vue или другие корневые / дочерние компоненты, которые вы будете sh. потому что у вас есть доступ к управлению вашим магазином, используя $store верно?

ОБНОВЛЕНИЕ **: и еще одна вещь, которую я хочу упомянуть, если вы хотите сохранить какой-то прогресс или состояние и из-за этого вы хотите получить подтверждение от пользователя (прогресс будет потерян, если они переключат маршрут), вам следует рассмотреть возможность использования Vuex для сохранения вашего прогресса или состояния вашего приложения, и если вы хотите более устойчивое решение, вы можете использовать управление хранилищем VuexPersisted, которое использует LocalStorage.

Vue документ навигационной охраны маршрутизатора

Vuex Do c

...