为什么vue-router4得组合式api必须写在setup函数顶层,useRouter为什么在其他地方为undefine

今天在开发中偶然遇到了一个问题，就是在setup以外的地方使用vue-router得组合式api，发现返回的是undefined，一开始我以为是router没有引入，但是检查过后发现并没有那么简单。
首先我打印了一下useRouter发现函数内部返回了一个reject(ROUTE_KEY)，然后去查阅源码发现如下图

我接着找到了注入该key得地方

此时我们发现inject是来自vue得一个组合式api。然后顺藤摸瓜找到vue文档中写了一句话。如下图

通过官方上图得两段话可可知，如果我们在setup以外得地方使用就会是undefined。 那么有没有解决办法呢？

遇到问题最好的办法首先肯定是看文档，文档中没有就去issus上面找，我们看到github中已经有人提了该问题

下面可以看到作者大大已经回答得很明确了。目前有两个办法可以解决

if you are not doing SSR (Server Side Rendering), you can directly import it from your router.js wherever you need
else, you will need to inject the router into the store to be able to use it everywhere. e.g. with Pinia, you attach it to all the stores:

这两句话翻译过来就是

如果你不在做服务器端渲染（SSR），你可以直接从你的 router.js 中导入它，无论在何处你需要它。
否则，你需要将路由器注入到存储中，以便在任何地方使用它。例如，使用 Pinia，你可以将它附加到所有的存储中：

至此不仅疑惑也解决了，办法也有了