vue-router не остается на той же странице после обновления страницы - PullRequest
Новая
       20

vue-router не остается на той же странице после обновления страницы

0 голосов
/ 30 мая 2019

У меня есть два маршрута на vue-router, / user /: uid и / itinerary /: id.Первый маршрут отображается после того, как пользователь входит в систему, и оттуда он выбирает маршрут, который он хочет просмотреть, который приведет его к следующему маршруту.

При включенном / itinerary /: id, если я обновляю страницу / перезагружаюсь / f5, я вижу адресную строку браузера снова в / user /: uid.В vue-devtools он просто сбрасывается до отображения / user /: uid (не в случае с router.push () или чем-то другим).Почему это происходит и как я могу держать пользователя в / itinerary /: id, даже если он обновляет страницу? 

const routes = [
  { path: '/', component: LoginPanel },
  {
    path: '/user/:uid',
    component: ItineraryList,
    beforeEnter: authGuard,
  },
  {
    path: '/itinerary/:itinerary_id',
    name: 'itineraryView',
    component: ItineraryBuilder,
    beforeEnter: authGuard,
  },
];

function authGuard(to, from, next) {
  // retrieved from localStorage
  if (idToken && userEmail) {
    next();
  } else {
    next('/');
    window.alert('Please login first');
  }
}

Редактировать: Добавлен соответствующий код из ItineraryBuilder 

beforeRouteLeave(to, from, next) {
    if (this.confirmed) { // set on data() property
        next();
    } else {
        this.$modal.show('dialog', {
            title: 'Confirm save new changes?',
            text: '',
            buttons: [{
                title: 'Yes',
                handler: () => { 
                    let itinerary_id = this.$route.params.itinerary_id
                    let queries = [];
                    this.itinerary.forEach(item => {
                        console.log(item);
                        let board_id = item.doc_id;
                        queries.push(db.collection('itineraries').doc(board_id).set(item, { merge: true }));
                    });

                    Promise.all(queries).then(() => {
                        // this.$store.commit('UPDATE_ITINERARY', this.itinerary);
                        this.$modal.hide('dialog');
                        this.confirmed = true
                        eventBus.$emit('itinerary_saved', true);
                        next();
                    })
                }
            },
            {
                title: 'No',
                handler: () => {
                    this.$modal.hide('dialog');
                    next(false);
                }
            }]
        });
    }
}

Iсначала не заметил, но может ли это быть связано?Я использую this.confirm в качестве флага для обработки, если есть какие-либо изменения, сделанные пользователем, я сгенерирую событие изменения и установлю для флага значение false - это означает, что есть несохраненные изменения, поэтому текущее состояние не подтверждено.

...