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>