vue.js - 检测浏览器关闭或页面更改 VueJs

Question

我尝试检测用户何时更改/插入输入，并且他尝试更改/关闭页面以向他发出警告。我做了一些研究，但直到现在我还没有找到任何东西。

<b-form-group label="Name" label-for="name-input">
<b-form-input
        id="name-input"
        v-model="name"
></b-form-input>
</b-form-group>

created() {
    document.addEventListener('beforeunload', this.handlerClose)
},
handlerClose: function handler(event) {
    console.log('CHANGE!!!!');
},

Answer 1

检测导航到不同页面或关闭页面
您可以尝试使用相同的事件处理程序 beforeunload在窗口对象上，而不是文档对象上，例如 MDN Web Docs (https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event) 中所述。该事件应该处理两种情况，切换页面和关闭页面。

<script>
  export default {
    created() {

      window.addEventListener('beforeunload', (event) => {
        // Cancel the event as stated by the standard.
        event.preventDefault();
        // Chrome requires returnValue to be set.
        event.returnValue = '';
      });

    }
  }
</script>

此事件使网页能够触发确认对话框，询问用户是否真的要离开该页面。如果用户确认，浏览器导航到新页面，否则取消导航。
关于您检测是否已进行更改的第二个问题:此事件处理程序未检测到更改。
为了保持用户进行更改时的状态，例如到一个表格，我会用数据 Prop 外包这个状态 isChanged并使用 false 对其进行初始化.然后使用 Vue 指令 v-on:change或 v-on:input从 false 更改 Prop 至 true .

<template>
  <div>
    <input type="text" @change="userMadeChange" v-model="inputText" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputText : "",
      isChanged : false
    }
  },
  methods : {
    userMadeChange() {
      this.isChanged = true;
    }
  }
}
</script>