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

Question

我想开发一个包含 vue.js 组件的库。该组件内部将包含导航元素。我希望它在有和没有 vue 路由器的情况下都能工作。在路由器模式下，它应该使用 <router-link>，如果没有使用路由器，它应该 return 标准 <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>

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

Answer 1

你可以检查创建的（或挂载的）生命周期钩子this.$router你可以访问所有的路由和路由器对象，这意味着你可以检查你需要的东西。在此基础上设置 isRouter 变量。

Answer 2

如果你使用的是 Vue3，你可以这样使用 getCurrentInstance :

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

但是，正如文档所说：

getCurrentInstance is only exposed for advanced use cases, typically in libraries. Usage of getCurrentInstance is strongly discouraged in application code

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

How to detect if vue-router is used in current Vue instance?

javascript

vue.js

vue-component

vue-router

vue-sfc