web-dev-qa-db-ja.com

Vueでページを離れる前に、保存されていない変更についてユーザーに警告するには

UnsavedChangesModalのコンポーネントとして、ユーザーが入力フィールドで変更を保存していないときにページを離れようとしたときに起動する必要があるコンポーネントがあります（ページには3つの入力フィールドがあります）。

components: {
    UnsavedChangesModal
},
mounted() {
    window.onbeforeunload = '';
},
methods: {
   alertChanges() {

   }
}
javascriptvue.jsvuex
17
Bargain23

vue-router を使用していると仮定すると（そしておそらく使用する必要があります）、beforeRouteLeaveガードを使用することになります。 ドキュメント は、この正確な状況の例も示しています。

beforeRouteLeave (to, from , next) {
  const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
  if (answer) {
    next()
  } else {
    next(false)
  }
}

コンポーネントに直接追加できます：

components: { ... },
mounted: { ... }
methods: { ... },
beforeRouteLeave (to, from, next) { ... }
20
jpschroeder

Vue-routerを使用していますか？私は航海警備隊を調べます。私はそれらを心に留めていますが、まだ自分で使用していません。それらのドキュメントは次のとおりです： https://router.vuejs.org/guide/advanced/navigation-guards.html

5
juan8a