onBeforeRouteLeave 和 onBeforeRouteUpdate 可以正常在setup中使用
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router';
import { ref } from 'vue'
export default {
setup() {
// 與 beforeRouteLeave 相同，無法訪問 `this`
onBeforeRouteLeave((to, from) => {
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// 取消導航并停留在同一頁面上
if (!answer) return false
})
const userData = ref()
// 與 beforeRouteUpdate 相同，無法訪問 `this`
onBeforeRouteUpdate(async (to, from) => {
//僅當 id 更改時才獲取用戶，例如僅 query 或 hash 值已更改
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
},
}
但beforeRouteEnter無法在setup語法糖中使用，只能用其他方法
方法一
<script lang="ts">
export default {
beforeRouteEnter(to: any, from: any) {
console.log("salesOrder beforeRouteEnter",to ,from)
},
beforeRouteLeave(to: any, from: any) {
console.log("salesOrder beforeRouteLeave",to ,from)
},
}
</script>
<script setup lang="ts" name="xxx">
// 語法糖代碼
</script>
該方法的問題是不同script標簽內的數據是不相通的
方法二
export default {
beforeRouteEnter(to, from, next) {
// balabala
},
setup() {
// balabala
}
}
