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

在yes上,它应该重定向到下一个想要的路由,否则就保持在同一个路由上.

你知道怎么实现吗?

提前谢谢.

推荐答案

你可以使用In-Component Guards beforeRouteLeave.见https://router.vuejs.org/en/advanced/navigation-guards.html.

演示:https://codesandbox.io/s/jzr5nojn39(try 在主页、第1页和第2页之间导航)

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

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

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

如果应该取消重定向,请使用next(false).

Vue.js相关问答推荐

将Vite Vuejs应用部署到Apache服务器

如何只提取一次用于无线电组过滤的数据,而不是针对数据库中的每个条目提取数据?

为什么 Pinia/Vuex 比使用服务类的classic 方法更受欢迎?

在 onMounted 之前渲染的 Vue 模板

Vue Js Composition Api 未定义(读取名称)

使用 cypress 进行 e2e 测试的 vuejs 期间出现 Webpack 错误

vue 计算的 ant watch 不会在嵌套属性更改时触发

查找未销毁的 Vue 组件

如何使用 vue 或 javascript 向服务器发送密码?

Vue:根元素内容和内容分发槽

Vuetify v-data-table ,如何在 HTML 中呈现标题文本?

在基于 TypeScript 的 Vue 中将 vuex 状态和Mutations绑定到复选框组件属性

emit更新数组不起作用

使用 puppeteer 生成 PDF 而不保存

如何在 Vuetify DataTable 组件中设置初始每页行数值?

使用 Vuetify 的可滚动数据表

如何在我的 vue js 中实现无限滚动

为什么 router.currentRoute.path 没有react?

如果通过 jquery 更新,Vuejs 绑定不起作用

v-bind:class 的 Vue.js 计算(computed)属性