Vue路由器在RouteLeave触发两次之前

Question

我正在尝试创建全局的“未保存的更改确认”功能。

因此，每当编辑某些表单时，我都会设置一个全局vuex状态，说有未保存的更改，然后我希望用户在更改路线之前进行确认。

我已经创建了一个全局mixin-它工作正常，除非存在嵌套的路由器视图时-然后将beforeRouteLeave触发两次，然后next（）函数不起作用？

外观如下：

Vue.mixin({
    computed: {
        unsavedChanges() {
            return this.$store.getters["helpers/unsavedChanges"]
        }
    },
    beforeRouteLeave (to, from, next) { 
        if (this.unsavedChanges) {
            this.$Modal.confirm({
                title: 'Unsaved changes',
                content: '<p>Are you sure you wish to leave the page?</p>',
                okText: 'Continue',
                cancelText: 'Cancel',
                onOk: () => {
                    next()
                },
                onCancel: () => {
                    next(false)
                }
            });
        }
    } 
})

只要没有子路由器视图，它就可以正常工作，但是即使有子路由器视图，即使单击“继续”并调用next（）函数，路由器也不会改变。

我该如何解决？谢谢。