vue. js beforeRouteLeave кнопка возврата не предотвращается

Question

Я работаю над приложением vue. js. Вы можете увидеть его здесь:

http://www.bodecanada.com

Это веб-сайт по недвижимости, где люди могут покупать и продавать недвижимость онлайн.

У нас есть страница, на которой продавец может заполнить форму с информацией о собственности, которую он или она хочет продать, а затем нажать кнопку «Отправить», чтобы опубликовать ее в виде списка (если вы можете войти, нажмите «продать» в верхней навигационной панели, нажмите « создать список ", нажмите кнопку" начать ", заполните адрес и установите флажок" Условия и положения "и нажмите кнопку" начать ", после чего вы окажетесь в форме).

Эта форма разбита на разделы , Вы попадаете в каждый раздел, заполняя текущий раздел и нажимая «продолжить». Вы заметите, что следующий раздел становится видимым под текущим разделом, и прокрутите к нему вниз.

Я работаю над всплывающим окном, которое появляется, если вы хотите покинуть страницу (нажмите кнопку назад, нажмите на ссылка, et c.), которая спрашивает, уверены ли вы, что хотите уйти. Кажется, работает нормально, за исключением нескольких странных поведений:

1) Если вы нажмете кнопку «Назад», она прокрутится до верхней части формы (до первого раздела), пока всплывающее окно станет видимым.

2) После 2 или 3 раз нажатия кнопки «Назад» и нажатия «Отмена» во всплывающем окне (так что вы остаетесь на странице), в конечном итоге он просто оставляет страницу без всплывающего окна (для меня это всегда будет go назад к Google, потому что это страница, на которой открылась вкладка, когда я открывал новую вкладку и затем вводил localhost: 8080 до go для сайта на моем локальном компьютере).

Я использую встроенный компонент beforeRouteLeave hook , Мне интересно, правильно ли я это делаю. Вот мой код:

<template>
<div>
<upsert-listing editing="false" :user="user" @stepChanged="onStepChanged"></upsert-listing>

<v-dialog v-model="confirmDialog" max-width="600px" persistent>
  <v-card>
    <div style="max-width:500px; width:100%; margin:0 auto;" class="py-5">
      <v-toolbar flat pa-0 color="white">
        <v-toolbar-title>Leave Page?</v-toolbar-title>   
      </v-toolbar>        
      <v-card-text>
        <v-layout class="mt-3">
          <p>Are you sure you want to leave the listing page? If you leave, your listing will be saved in "My Listings"</p>   
        </v-layout>      
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn name="Leave" color="primary" @click="leave()">Leave</v-btn>
        <v-btn name="Cancel" color="primary" @click="confirmDialog = false">Cancel</v-btn> 
      </v-card-actions>                     
    </div>     
  </v-card>
</v-dialog>
</div>
</template>


<script>
import { Component, Prop, Vue } from 'vue-property-decorator';
import UpsertListing from '@/components/listings/UpsertListing.vue';

export default {
components: {UpsertListing},

data: () => ({
confirmLeave: false,
confirmDialog: false,
leaveTo: null,
step: null
}),

props: {
user: null
},

methods: {
leave() {
  this.confirmLeave = true;
  this.$router.push(this.leaveTo.fullPath);
},

onStepChanged(val) {
  this.step = val;
},

isPopupWarranted() {
  return this.step
    && this.step !== 'preamble'
    && this.step !== 'intro'
    && this.step !== 'listing-submitted';
}
},

beforeRouteLeave(to, from, next) {
console.log('step =', this.step);
if (!this.confirmLeave && this.isPopupWarranted()) {
  this.leaveTo = to;
  this.confirmDialog = true;
} else {
  next();
}
}
}
</script>

^ Это компонент AddListing. vue. Именно здесь находится всплывающее окно со всеми логиками c, чтобы вызвать его, обработать события щелчка, покинуть страницу или остаться, и т. Д. c.

Вы можете заметить, что есть также дочерний компонент : UpsertListing. vue. Это где фактическая форма находится. Код слишком велик для размещения здесь, но я опубликую это:

watch: {
step(val) {
  ...
  this.$emit('stepChanged', val);
}

Каждый раз, когда пользователь нажимает кнопку «продолжить» (до go до следующего раздела формы), «шаг» обновлен, чтобы указать, на каком этапе находится пользователь. Поскольку событие beforeRouteLeave вызывается только для родительского компонента, мне нужно отправить событие из дочернего компонента, чтобы указать, что значение шага изменилось. Событие перехватывается onStepChanged (...) в родительском объекте, где родительская версия "step" установлена ​​в то же значение. Наконец, родительская версия шага используется для определения того, должно ли всплывающее окно отображаться или нет (т.е. это зависит от того, на каком шаге находится пользователь).

Я не уверен, влияет ли это на мою ситуацию или нет, но я решил опубликовать его, чтобы вы знали, как работают страница и всплывающее окно.

В любом случае проблема заключается в том, что всплывающее окно не блокирует поведение кнопки "Назад". , Это просто вызывает всплывающее окно, но прокрутка назад к вершине кажется, что происходит, по крайней мере, некоторое частичное поведение кнопки возврата. А потом после 2 или 3 попыток всплывающее окно не открывается, и меня снова возвращают в Google (интересно, не испортился ли стек истории навигации).

Похоже, я все делаю правильно в beforeRouteLeave? Должен ли я как-то блокировать поведение кнопки возврата в beforeRouteLeave? Если бы я мог передать событие в beforeRouteLeave, я мог бы попробовать e.preventDefault () или e.stopPropagation (). Есть ли эквивалент этому в beforeRouteLeave?

Спасибо за любую помощь.