Question

我在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-意味着有未保存的更改，因此未确认当前状态。

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

0 个答案: