Vuejs:在路线更改之前显示确认对话框 [英] Vuejs: Show confirmation dialog before route change

问题描述

在我的 vueJS 项目中，我想在当前路由更改之前显示确认对话框.

In my vueJS project, I want to show confirmation dialog before the current route changes.

如果是，它应该重定向到下一个所需的路线，否则保持在同一路线上.

On yes, it should redirect to next desired route otherwise keep it on same route.

知道如何实现它吗?

提前致谢.

推荐答案

您可以使用组件内保护 beforeRouteLeave.请参阅 https://router.vuejs.org/en/advanced/navigation-guards.html .

You can use In-Component Guards beforeRouteLeave. See https://router.vuejs.org/en/advanced/navigation-guards.html .

演示:https://codesandbox.io/s/jzr5nojn39(尝试在主页、页面之间导航1, 第 2 页)

Demo: https://codesandbox.io/s/jzr5nojn39 (try navigating between home, page 1, page 2)

示例代码(使用 vuejs-dialog 作为确认对话框):

Sample Code (using vuejs-dialog as the confirmation dialog):

    beforeRouteLeave (to, from, next) {
        this.$dialog.confirm('Do you want to proceed?')
        .then(function () {
            next();
        })
        .catch(function () {
            next(false);
        });
    }

如果它应该继续，使用next().

If it should proceed, use next().

如果要取消重定向，请使用next(false).

If the redirection should be cancelled, use next(false).

这篇关于Vuejs:在路线更改之前显示确认对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！