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>