Vue 表单未保存离开页面提醒

我们常常会遇到一种场景：一个页面表单内容特别多，吭哧吭哧的填写完了，正要点提交，但是手抖点到外面的某个地方，跳出去了，整个页面洗白白，前面的努力付诸东流。这种情况要是刚刚我点错的时候，有个提示信息拦着就好了。所以现在我们来做这样的一个功能。

beforeRouteLeave

简单的组件的就不说了，如果是嵌套组件的话，如何使用这个路由守卫。

当前场景是，一个路由过来的组件A，A里有B和C组件，C组件是表单，B组件是详情。C组件需要有离开路由守卫，如果在C组件内直接写无效，所以要在A中写

首先我们知道，beforeRouteLeave和methods平级：

我们要在父组件中写：

A.vue
A的视图

<template>
	<div class="home">
		<B v-if="showB" ref="B"></B>
		<C v-if="showC" ref="C"></C>
	</div>
</template>

A的逻辑

beforeRouteLeave (to, from, next) {
// 如果不存在C的（这个主要是因为B也会触发），或者存在C并且保存了，那就可以继续。
    if (!this.$refs.C|| this.$refs.C.hasSaved) {
      next()
    } else {
    // 否则需要询问用户确定是否离开，供用户冷静一下，实在要走就走吧，不走就留下。
      const answer = window.confirm('您的编辑还未保存，是否离开？')
      if (answer) {
        next()
      } else {
        next(false)
      }
    }
  }

只需要在C表单vue中的data定义hasSaved，默认值为false，保存成功后将hasSaved设置成true，就ok了。