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!'
      )
      // 取消導(dǎo)航并停留在同一頁面上
      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標簽內(nèi)的數(shù)據(jù)是不相通的

方法二

export default {
    beforeRouteEnter(to, from, next) {
       // balabala
    },

    setup() {
       // balabala
    }
}