vue2 / vue3 路由(返回&跳转)时判断 + 取消跳转

vue3 options api：

<template>
  <button @click='$router.back()'>返回</button>
  <input type="text" v-model="formData.v1">
  <textarea name="" id="" v-model="formData.v2" cols="30" rows="10"></textarea>
</template>
<script lang="ts">
export default {
  data() {
    return {
      formData: {
        v1: '',
        v2: '还不睡觉？',
      },
      isChange: false
    }
  },
  watch: {
    formData: {
      handler() {
        this.isChange = true
      },
      deep: true
    }
  },
  beforeRouteLeave(to, from) { // 三个参数 to  from  next【这个如果声明了不使用则会报错】
    if (this.isChange) {
      return false
    } else {
      return true
    }
  }
}
</script>

vue3 composition api：

<template>
  <button v-if="isChange" @click="isChange = false, $router.back()">返回 - 确认不保存</button>
  <button @click='$router.back()'>返回</button>
  <input type="text" v-model="formData.v1">
  <textarea name="" id="" v-model="formData.v2" cols="30" rows="10"></textarea>
</template>
<script lang="ts" setup>
import { onBeforeRouteLeave, useRouter } from 'vue-router'
import { ref, watch } from "vue";
const router = useRouter()
const formData = ref({
  v1: '',
  v2: '芙莉莲',
})
const isChange = ref(false)
watch(formData, (newDaTA) => {
  console.log(newDaTA);
  isChange.value = true
}, {
  deep: true
})
onBeforeRouteLeave((v1, v2) => {
  if (isChange.value) {
    return false
  } else {
    return true
  }
})
</script>

vue2：

<template>
  <div>
    <button @click='$router.back()'>返回</button>
    <input type="text" v-model="formData.v1">
    <textarea name="" id="" v-model="formData.v2" cols="30" rows="10"></textarea>
  </div>
</template>
<script>
export default {
  data() {
    return {
      formData: {
        v1: '',
        v2: '还不睡觉？',
      },
      isChange: false
    }
  },
  watch: {
    formData: {
      handler() {
        this.isChange = true
      },
      deep: true
    }
  },
  beforeRouteLeave(to, from, next) {
    if (this.isChange) {
      next(false) // 取消跳转
    } else {
      next()
    }
  }
}
</script>