vue-router4.x中导航守卫在app.vue内无法触发？

Question

app.vue代码如下：

<template>
  <router-view></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

如果我放到页面里面去就可以监听到这个事件，但是同样也会有一个警告

请大佬指点一下如何消除这两个警告，并且在app.vue里面也能监听到导航守卫。

Answer 1

原因大概是知道了，是因为我在app.vue下面使用onBeforeRouteLeave这个路由钩子，而app.vue是总路由的页面，所以不会触发这个路由钩子，就提示警告了。