[Vue | ElementUI] pop-up confirmation box when realized Vue leaving the current page

When the pop-up confirmation box to achieve Vue leaving the current page

1. To achieve the purpose of

In some business scenarios, users are not allowed to jump to another page. Thus, the need to prompt the user when the user misuse or click your browser jump.

2. The principle

1. Use routing control guards beforeRouteLeave
2. Constant attention to maintain the address bar if the browser forward and back buttons

<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>