I am working on creating a library that includes a vue.js component with navigation elements. The goal is for this component to be flexible, able to function both with and without vue router. When used with the router, it will utilize <router-link>, and when not using the router, it should revert to standard <a> tags.
<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>
- What method can be used to determine if vue-router is active in the current Vue instance?
- Is there an alternative approach to utilizing
<router-link>as a fallback to<a>without resorting to if/else statements?