Menu
My code is this.
However, in this code, "/" does not become active-class when domain.com/?standalone=true.
<nuxt-link to="/" class="navBotton" exact-active-class="active" ><span>Home</span>
</nuxt-link>
<nuxt-link to="/post" class="navBotton" active-class="active" ><span>Post</span>
</nuxt-link>
<nuxt-link to="/about" class="navBotton" active-class="active" ><span>About</span>
</nuxt-link>
How do I fix it?
When I remove exact, it becomes active-class on all pages.
Thank you for some answers.
I found a way to activate when "/" regardless of parameter. This is the code.
<nuxt-link
to="/"
class="navBotton home"
:class="{'active': isRouteActive }"
exact-active-class="active"
>
computed: {
isRouteActive: function() {
if (this.$nuxt.$route.path=="/") {
return true;
} else {
return false;
}
}
}
669
In order to style your active links the only thing you have to do to is add the nuxt-link-active class to your styles and then you can style it as you wish. Sometimes this will also add styles to other links such as the parent routes or the home page.
<NuxtLink> is a drop-in replacement for both Vue Router's <RouterLink> component and HTML's <a> tag. It intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.)
Is to change the tag to the button and use the native :disabled state. Then just turn the button into the link with the help of styles. Awesome solution, thanks.
in nuxt configuration file usually called nuxt.config.js there is a property of the object called router:
router: {
linkActiveClass: 'your-custom-active-link',
linkExactActiveClass: 'your-custom-exact-active-link',
}
Then in your css:
.your-custom-active-link {
/* styles here */
}
.your-custom-exact-active-link {
/* styles here */
}
Hope it helps!
69
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
