navbar active tab using using nuxt/vue - html

Question

I have a side navbar and I'm trying to make it active according to page click.
This is my sidenav.nav which is a component.
<template>
<aside class="col-md-3">
<nav class="list-group">
<a href="/" class="list-group-item" exact>
Account overview
</a>
<a class="list-group-item" href="/profile/address"> My Address </a>
<a class="list-group-item" href="/profile/orders"> My Orders </a>
<a class="list-group-item" href="/profile/wishlist"> My wishlist </a>
<a class="list-group-item" href="/profile/settings"> Settings </a>
<a class="list-group-item" href=""> Log out </a>
</nav>
</aside>
</template>
Below is my code for address page, other pages are similar to this.
<template>
<section class="section-content padding-y">
<div class="container">
<div class="row">
<sidenav />
<!-- col.// -->
<main class="col-md-9">
<a href="#" class="btn btn-light mb-3">
<i class="fa fa-plus"></i> Add new address
</a>
<div class="row">
<div class="col-md-6">
<article class="box mb-4">
<h6>London, United Kingdom</h6>
<p>
Building: Nestone <br />
Floor: 22, Aprt: 12
</p>
<a href="#" class="btn btn-light disabled">
<i class="fa fa-check"></i> Default</a
>
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Tashkent, Uzbekistan</h6>
<p>
Building one <br />
Floor: 2, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
<div class="col-md-6">
<article class="box mb-4">
<h6>Moscow, Russia</h6>
<p>
Lenin street <br />
Building A, Floor: 3, Aprt: 32
</p>
Make default
<a href="#" class="btn btn-light">
<i class="fa fa-pen"></i>
</a>
<a href="#" class="btn btn-light">
<i class="text-danger fa fa-trash"></i>
</a>
</article>
</div>
<!-- col.// -->
</div>
<!-- row.// -->
</main>
</div>
</div>
</section>
</template>
<script>
import sidenav from "~/components/profile-sidenav";
export default {
components: {
sidenav,
},
};
</script>
I have set account overview as the active page, when i go to address page i need 'My address' tab to be active. How do i do that? I tried but that didn't work.

Answer 1

Instead of using <a> tags, use <nuxt-link>. Then, in your css, style the .nuxt-link-exact-active class— for example:
.nuxt-link-exact-active {
font-weight: bold;
}
Now if you have <nuxt-link to=“/address”>My Address</nuxt-link> and the user is on the /address page, the class is added to the nuxt-link element.