H5页面返回时提示用户返回将丢失信息

效果图

代码，组件封装弹窗

<template>
 <div>
    <van-popup v-model="show" :close-on-click-overlay="false" class="popup">
        <div class="content">
            <div class="title">提示:</div>
            <div class="text">
                返回后当前数据将丢失,是否确认
            </div>
        </div>
        <div class="btns">
            <van-button class="btn" @click="cancel">取消</van-button>
            <van-button type="info" @click="sureBtn" class="btn">确认</van-button>
        </div>
    </van-popup>
 </div>
</template>

<script>
export default {
    components: {

    },
    props: {
        show: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
        }
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {
        cancel() {
            this.$emit('cancel')
        },
        sureBtn() {
            this.$emit('sureBtn')
        }
    }
}
</script>
<style scoped lang="scss">
.popup{
    width: 400px;
    border-radius: 15px;
    .content{
        padding: 24px;
        .title{
            margin-bottom: 12px;
            font-size: 32px;
        }
        .text{
            padding: 12px;
            font-size: 28px;
        }
    }
    .btns{
        margin-top: 24px;
        width: 100%;
        display: flex;
        .btn{
            flex: 1;
        }
    }
}
</style>

使用

<backPopup
      :show="isShow"
      @cancel="cancel"
      @sureBtn="sureBtn"
/>

<script>
import backPopup from '@/components/backPopup/index.vue'
export default {
    components: {
        backPopup
    },
    props: {

    },
    data() {
        return {
            isShow: false
        }
    },
    computed: {

    },
    created() {
    },
    mounted() {
        if (window.history && window.history.pushState) {
            // 向历史记录中插入了当前页
            history.pushState(null, null, location.href)
            window.addEventListener('popstate', this.goBack, false)
        }
    },
    destroyed() {
        window.removeEventListener('popstate', this.goBack, false)
    },
    watch: {

    },
    methods: {
        goBack() {
            this.isShow = true
            // if (this.isPublicize) { // 禁止浏览器返回
            //     history.pushState(null, null, location.href)
            //     this.isPublicize = false
            // } else { // 可以返回的时候
            //     this.sureBtn()
            //     // this.$router.go(-1)
            // }
        },
        sureBtn() {
            this.$router.go(-1)
        },
        cancel() {
            this.isShow = false
            history.pushState(null, null, location.href)
            this.isPublicize = true
        }
    }
}
</script>