Vue.js Vue js-从对话框中获取答案，以确认导航与Vue路由器+；武装分子

如果我有一个带有vuetify对话框的vue模板（但实际上是任何与此相关的对话框），我如何使用它在vue router的BeforeRouteLave方法中确认离开页面的导航

dialogTest.vue:

<template>
    <v-container>
        <v-layout>
            <v-dialog v-model="dialog" max-width="290" ref="popup">
                <v-card>
                    <v-card-title class="headline">Are you sure you wish to leave this page?</v-card-title>
                    <v-card-text>Better think long and hard.</v-card-text>
                    <v-card-actions>
                        <v-spacer></v-spacer>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Nah</v-btn>
                        <v-btn color="primary darken-1" flat="flat" @click.native="dialog = false">Yah</v-btn>
                    </v-card-actions>
                </v-card>
            </v-dialog>
        </v-layout>
    </v-container>
</template>

<script src="./dialogTest.ts"></script>

import Vue from 'vue';
import { Component } from 'vue-property-decorator';

Component.registerHooks([
    'beforeRouteLeave'
]);

@Component
export default class DialogTestComponent extends Vue {

    dialog: boolean = false;

    beforeRouteLeave(to: Object, from: Object, next: Function) {
        console.log('beforeRouteLeave');

        //this works, but obviously doesn't use our dialog -> how do we get yah or nah response from dialog instead?
        const answer =  window.confirm('Do you really want to leave? you have unsaved changes!')
        if (answer) {
            next()
        } else {
            next(false)
        }
    }
}

---

我喜欢用承诺来做这件事。为对话框提供一个返回承诺的pop（）方法，然后在用户选择时使用true或false解析承诺。或者从单元测试中调用clickYah（）。像这样的

// in your dialog component....
data(){
    return {active : false, resolve: null};
}
methods : {
    pop(){
        this.active = true;
        return new Promise(function(resolve, reject){
            this.resolve = resolve;
        });
    },
    clickYah(){
        this.active = false;
        this.resolve(true);
    },
    clickNah(){
        this.active = false;
        this.resolve(false);
    }
}

// then to call it...
this.$refs.modalDialog.pop()
.then(confirmResult => next(confirmResult));

---

@谢谢你快速的回答

以下是我的ts期末考试：

父组件中的（其中包含带有ref=“confirmLeavePopup”的ConfirmLeaveDialog组件）：

在ConfirmLeaveDialog vue类组件中（我将组件的resolve func存储重命名为“answer”）：

从“Vue”导入Vue；
从“vue属性装饰器”导入{Component，Prop}；
@组成部分
导出默认类ConfirmLeaveDialog扩展Vue{
@Prop（{default:'您确定要离开此页吗？}）
问题:有否,；
活动：布尔=假；
回答：函数=（）=>{return false}；//。必须提供类型并初始化
承诺{
this.active=true；
返回新承诺（（resolve:Function，reject:Function）=>{//。请注意此处的箭头函数，以便“this”指的是组件，而不是调用上下文
这个答案=决心；
});
};
confirmLeave（）：void{
this.active=false；
这个答案是正确的；
};
abortLeave（）：void{
this.active=false；
这是答案（错）；
}
}

使用typescript的Vuejs的任何教程链接。

async beforeRouteLeave(to: Object, from: Object, next: Function) {
    next(await (this.$refs.confirmLeavePopup as ConfirmLeaveDialog).pop()); 
}

import Vue from 'vue';
import { Component, Prop } from 'vue-property-decorator';

@Component
export default class ConfirmLeaveDialog extends Vue {

    @Prop({ default: 'Are you sure you wish to leave this page?' })
    question: any;

    active: boolean = false;
    answer: Function = () => { return false }; //. had to provide the type and initialize

    pop(): Promise<boolean> {
        this.active = true;
        return new Promise<boolean>((resolve: Function, reject: Function) => { //. note the arrow function here such that 'this' refers to the component, NOT the calling context
            this.answer = resolve;
        });
    };

    confirmLeave(): void {
        this.active = false;
        this.answer(true);
    };

    abortLeave(): void {
        this.active = false;
        this.answer(false);
    }
}