vue3组件内使用路由守卫阻止页面跳转

先引入

import {  onBeforeRouteLeave } from "vue-router";

再调用

onBeforeRouteLeave((to, from, next) => {

      ElMessageBox.confirm("您还未付款，是否确认离开支付？", {

        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning"

      })

        .then(() => {

          next();

        })

        .catch(() => {

          console.log("111");

        });

    });

表示路由跳转之前进行判断是否要离开，确认的话调用next()离开当前页面，ElMessageBox.confirm是element-plus的一个方法