Vue.js中useRoute()在@click事件中调用返回undefined的问题求助

各位开发者好，我遇到了一个困扰我的问题：在我的Vue.js项目里使用useRoute()时，如果在<script setup>里定义的函数内部直接调用它，能正常返回路由对象，但把这个函数绑定到@click事件里调用时，useRoute()就返回undefined了。

下面是我的代码：

<script setup>
import { RouterLink, useRoute } from 'vue-router';

const activeRoute = function() {
  const route = useRoute();
  console.log(route);
};
</script>

<template>
  <nav>
    <div>
      <RouterLink
        to="/add/job"
        :class="activeRoute() ? 'text-white' : 'text-black'"
      >
        Add Job
      </RouterLink>
      <RouterLink @click="activeRoute()" to="/jobs">Jobs</RouterLink>
    </div>
  </nav>
</template>

我试过用setTimeout延迟5秒再打印route，结果还是undefined。另外我还打印了useRoute函数本身，发现它返回的是一个inject()函数——这明明是Vue内置的路由钩子，实在搞不懂为什么会出现这种情况，有没有大佬能帮我分析下问题出在哪？

备注：内容来源于stack exchange，提问作者Nidvar