Vue | ElementUIVue离开当前页面时弹出确认框实现

Posted axiangcoding

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue | ElementUIVue离开当前页面时弹出确认框实现相关的知识,希望对你有一定的参考价值。

Vue离开当前页面时弹出确认框实现

1. 实现目的

在某种业务场景下,用户不允许跳转到其他页面。于是,需要在用户误操作或者是点击浏览器跳转时提示用户。

2. 实现原理

  1. 使用路由守卫beforeRouteLeave进行控制
  2. 如果使用浏览器前进后退按钮时注意维持地址栏不变
<template>
 <div>
 </div>
</template>

<script>
export default {
 beforeRouteLeave (to, from, next) {
    this.$confirm('正在离开本页面,本页面内所有未保存数据都会丢失', '警告', {
       confirmButtonText: '确定',
       cancelButtonText: '取消',
       type: 'warning'
     }).then(() => {
       next()
     }).catch(() => {
       // 如果取消跳转地址栏会变化,这时保持地址栏不变
       window.history.go(1)
     })
 }
}
</script>

<style scoped>

</style>

以上是关于Vue | ElementUIVue离开当前页面时弹出确认框实现的主要内容,如果未能解决你的问题,请参考以下文章

VUE 离开页面路由拦截

vue项目监听滑块并移除。

离开(切换)当前页面时改变页面title

Vue 离开页面时的校验-mixin-beforeRouteLeave

vue禁止浏览器F5进行刷新和监听浏览器刷新事件

onbeforeunload 事件在即将离开当前页面(刷新或关闭)时触发。