javascript - 如何检测当前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

您可以检查创建(或安装)的生命周期钩子(Hook) this.$router 中的内容，您可以访问所有路由和路由器对象，这意味着您可以检查您需要的内容。在此基础上设置 isRouter 变量。