vue 编辑信息时切换路由出现是否切换提示

之前做了一个需求，想要实现在编辑表单时，在我点击保存或者是取消编辑之前切换至其他页面，会出现这种提示

 我们通常使用beforeRouteLeave(即路由离开之前)来判断是否要离开当前页面，beforeRouteLeave有三个参数to, from, next，见名知义

to: 目的地，即我们点击要切换的路由

from： 出发地，即我们当前所在路由

next:   放行，这是一个函数(即执行下一步操作)

 代码如下：

beforeRouteLeave(to, from, next) {
 if (to.name !== 'banana') { // 判断条件
  this.$msgbox({
   title: '取消提交',
   message: '取消后无法保存已填入的信息，是否确定取消？',
   confirmButtonText: '确定',
   cancelButtonText: '取消',
   showCancelButton: true,
   closeOnClickModal: false,
   customClass: 'message-box-submit'
  })
  .then(() => {
   // 点击确定，跳转指定路由
   next()
  })
  .catch(() => {
  })
 } else {
  next()
 }
}

具体的判断条件需要根据具体需求来进行判断，这里这个功能已经大致实现啦，希望对你们有帮助🥳