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

[zzlit]

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.

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

[lupkcd]

应该写在 <router-view /> 里面的组件才行吧，没试验，盲猜的

[shakukansp]

https://stackoverflow.com/questions/68100114/avoid-app-logic-that-relies-on-enumerating-keys-on-a-component-instance

学会搜 warning
如果没有就下载 vue3/vue-router 源码搜 warning，里面都能知道什么情况会出这个 warning

[zzlit]

@shakukansp 受教了