如何检测当前 Vue 实例中是否使用了 vue-router？

Question

我想开发一个包含 vue.js 组件的库。 该组件内部将包含导航元素。 我希望它可以在有和没有 vue 路由器的情况下工作。 在路由器模式下，它应该使用<router-link> ，如果没有使用路由器，它应该返回标准的<a>标签。

<template>
       <div>
            <div v-if="vueRouterIsUsed">
                <router-link v-bind:to="url">Router link</router-link>
            </div>
            <div v-else>
                <a :href="url">No router</a>
            <div>
       </div>
</template>
<script>
    export default{
        props: {
            url: {
                type: String,
            }
        }
    }
</script>

1. 如何检测当前 Vue 实例中是否使用了 vue-router？
2. 如果没有安装路由器，是否有更好的方法让 if/else 执行<router-link>到<a>回退？

Answer 1

您可以在创建的（或安装的）生命周期挂钩中检查this.$router中的内容，您可以访问所有路由和路由器 object，这意味着您可以检查您需要什么。 基于此设置 isRouter 变量。

Answer 2

如果您使用的是 Vue3，则可以像这样使用getCurrentInstance ：

const isVueRouterInstalled =
  !!getCurrentInstance().appContext.config.globalProperties.$router;

但是，正如文档所述：

getCurrentInstance 仅针对高级用例公开，通常在库中。 强烈建议不要在应用程序代码中使用 getCurrentInstance