求教 vue3 中使用 vue-router 的导航守卫问题

app.vue 代码如下

<template>
  <router-view />
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { onBeforeRouteLeave } from 'vue-router';

export default defineComponent({
  name: 'App',
  setup() {
    onBeforeRouteLeave((to, from) => {
      console.log('onBeforeRouteLeave', to, from);
    });
  }
});
</script>

跑起来控制台有警告，同时也不会触发 onBeforeRouteLeave 这个事件

[Vue Router warn]: No active route record was found. Are you missing a <router-view> component?

然后放到页面内能触发，但是同样也会有警告：

[Vue warn]: Avoid app logic that relies on enumerating keys on a component instance. The keys will be empty in production mode to avoid performance overhead.

请问大佬们这该怎么解决？