在以前 vue2.x 中使用组件内的导航守卫，都是直接 beforeRouteEnter，beforeRouteLeave，beforeRouteUpdate。
而在 vue3.x 语法糖中使用 beforeRouteEnter 必须这样，新建一个 script 标签：

<script lang="ts">
export default {
  beforeRouteEnter(to, from, next) {
    next()
  }
}
</script>

beforeRouteLeave 跟 beforeRouteUpdate 则可以在 setup 语法糖中使用：

<script setup lang="ts">
import {onBeforeRouteLeave, onBeforeRouteUpdate} from 'vue-router'

onBeforeRouteLeave ((to, from) => {
  console.log('onBeforeRouteLeave-from', from)
  console.log('onBeforeRouteLeave-to', to)
})

onBeforeRouteUpdate((to, from, next) => {
  console.log('更新了')
  next()
})
</script>