zoukankan      html  css  js  c++  java
  • 【Vue | ElementUI】Vue离开当前页面时弹出确认框实现

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

    这里是广告

    个人接私活,2年java开发经验,中小型前后端分离web项目、python爬虫系统、桌面简单应用等。提供开发-集成-部署一条龙服务。项目可用作课题,也可用作商用。如有需要,请发送邮件到 wyxworkmail@163.com 详细咨询

    1. 实现目的

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

    2. 实现原理

    1. 使用路由守卫beforeRouteLeave进行控制
    2. 如果使用浏览器前进后退按钮时注意维持地址栏不变
    <template>
     <div>
     </div>
    </template>
    
    <script>
    export default {
     beforeRouteLeave (to, from, next) {
        // 这里需要elementui的支持,如果使用其他界面组件自行替换即可
        this.$confirm('正在离开本页面,本页面内所有未保存数据都会丢失', '警告', {
           confirmButtonText: '确定',
           cancelButtonText: '取消',
           type: 'warning'
         }).then(() => {
           // 正常跳转
           next()
         }).catch(() => {
           // 如果取消跳转地址栏会变化,这时保持地址栏不变
           window.history.go(1)
         })
     }
    }
    </script>
    
    <style scoped>
    
    </style>
    
    
  • 相关阅读:
    运行jar包读取外部配置文件
    DES加密
    BlockingQueue
    文件锁
    Hive 的 排序
    linux下date命令实现时间戳与日期的转换
    bcov进行覆盖率统计
    对c++服务端进行覆盖率统计
    github基础命令
    gcc编译参数-fPIC问题 `a local symbol' can not be used when making a shared object;
  • 原文地址:https://www.cnblogs.com/axiangcoding/p/11913254.html
Copyright © 2011-2022 走看看