router.beforeEach(async (_to, _from, next) => { console.log(_from); if (_from.path === '/answer-complete' && _to.path === '/answer-card') { // 这里让成绩页不能返回答题卡 next({ path: '/answer-mode', replace: true }) } else if (_from.path === '/create-note') { console.log(222); await showConfirmDialog({ title: '退出笔记', message: '笔记还未保存,确定丢弃吗?', confirmButtonText: '保存并退出', confirmButtonColor: '#2E6EF4', cancelButtonText: '直接退出', cancelButtonColor: '#666' }).then(() => { next() }).catch(() => { next() }); } else next(); });在这段代码中,我从create-note页面保存退出后,再进去,再退出时,没有弹出模态框
时间: 2024-03-17 16:40:17 浏览: 13
根据你提供的代码,这段逻辑应该是在路由导航守卫中,其中 `beforeEach` 函数会在每次路由跳转前被调用。从 `create-note` 页面退出时,会弹出模态框询问是否保存并退出,但是从 `create-note` 再次进入,再退出时没有弹出模态框。
我猜测可能是因为在第一次离开 `create-note` 页面时,由于异步操作 `showConfirmDialog` 的存在,导致 `next()` 函数被提前调用了,路由被立即跳转到了其他页面,而模态框并没有完全弹出。当你再次进入 `create-note` 页面时,路由已经被跳转到了其他页面,因此再次退出时就没有弹出模态框了。
为了解决这个问题,你可以试着在 `showConfirmDialog` 的 `then` 和 `catch` 回调函数中调用 `next()` 函数,而不是在 `beforeEach` 函数中调用。这样可以确保模态框完全弹出后再进行路由跳转。具体代码如下:
```
router.beforeEach(async (_to, _from, next) => {
console.log(_from);
if (_from.path === '/answer-complete' && _to.path === '/answer-card') {
// 这里让成绩页不能返回答题卡
next({ path: '/answer-mode', replace: true })
} else if (_from.path === '/create-note') {
console.log(222);
await showConfirmDialog({
title: '退出笔记',
message: '笔记还未保存,确定丢弃吗?',
confirmButtonText: '保存并退出',
confirmButtonColor: '#2E6EF4',
cancelButtonText: '直接退出',
cancelButtonColor: '#666'
}).then(() => {
next(); // 在这里调用 next() 函数
}).catch(() => {
next(); // 在这里调用 next() 函数
});
} else {
next();
}
});
```
希望这个解答能够帮助到你!