如何在vue js中刷新/离开页面前加载对话框？

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const router = new Router({
  // 路由配置
})

router.beforeEach((to, from, next) => {
  // 在这里执行加载对话框的操作
  // 可以使用第三方库或自定义组件来实现对话框的加载

  next() // 必须调用next()方法，否则路由不会继续切换
})

export default router

import { MessageBox } from 'element-ui'

router.beforeEach((to, from, next) => {
  MessageBox.confirm('确定要离开当前页面吗？', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    // 用户点击了确定按钮，继续路由切换
    next()
  }).catch(() => {
    // 用户点击了取消按钮，取消路由切换
    next(false)
  })
})

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')