刷新页面后,vue-router不会停留在同一页面上

时间:2019-05-30 17:05:06

标签: vue.js vue-router

我在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);
                }
            }]
        });
    }
}

起初我没有注意到它,但是它可以关联吗?我使用this.confirm作为标志来处理用户是否进行了任何更改,我将发出一个change事件并将该标志设置为false-意味着有未保存的更改,因此未确认当前状态。

0 个答案:

没有答案