Files
ui/components/elements/Link.vue
2021-11-24 16:07:18 +01:00

41 lines
769 B
Vue

<template>
<NuxtLink v-slot="{ href, navigate }" v-bind="$props" custom>
<a
v-bind="$attrs"
:href="href"
:class="isActive ? activeClass : inactiveClass"
@click="navigate"
>
<slot v-bind="{ isActive }" />
</a>
</NuxtLink>
</template>
<script>
import { RouterLink } from 'vue-router'
export default {
name: 'Link',
props: {
...RouterLink.props,
inactiveClass: {
type: String,
default: ''
},
exact: {
type: Boolean,
default: false
}
},
computed: {
isActive () {
if (!this.exact) {
return !!this.$route.path.startsWith(this.to)
} else {
return this.$route.path === this.to || this.$route.path === `${this.to}/`
}
}
}
}
</script>