Vue3 - OnBefoureRouteLeave 不等待用户输入

Question

我需要创建一个 onBeforeRouteLeave 函数来等待用户输入。问题是出现未保存的更改确认对话框，但单击时没有任何反应。我调试程序的时候发现，对话框显示出来后，onBeforeRouteLeave函数早就结束了，所以无论用户点击什么都没有关系。如何正确创建这个函数？

这是我的代码 模板

<q-dialog v-model="unsaveGridDialog" persistent>
    <q-card>
        <q-card-section class="row items-center">
            <q-avatar icon="save" color="primary" text-color="white" />
            <span class="q-ml-sm">Are you want to leave bage without saving your grid?</span>
        </q-card-section>

        <q-card-actions align="right">
            <q-btn @click="unsaveCancel = true" flat label="No" color="primary" v-close-popup />
            <q-btn @click="unsaveConfirm = true" flat label="Yes" color="primary" v-close-popup />
        </q-card-actions>
    </q-card>
</q-dialog>

onBeforeRouteLeave

onBeforeRouteLeave((to, from, next) => {
    showUnsaveDialog()
        .then(() => {
           next();
         })
         .catch(() => {
           next(false);
         });   
});

显示取消保存对话框()

function showUnsaveDialog() {
    unsaveGridDialog.value = true;
    return new Promise((resolve, reject) => {
        const checkUserInput = () => {
            if (this.unsaveConfirm) {
                resolve();
            } else if (this.unsaveCancel) {
                reject();
            } else {
                setTimeout(checkUserInput, 100);
            }
        };
        checkUserInput();
    });
}

Answer 1

在您的 showUnsaveDialog 函数中，您忘记返回承诺，如下所示：

onBeforeRouteLeave((to, from, next) => {
    return showUnsaveDialog()
        .then(() => {
           next();
         })
         .catch(() => {
           next(false);
         });   
});