使用nuxt/vue激活导航栏选项卡

Question

我有一个侧导航栏，我正试图根据页面点击将其激活。

这是我的sidenav.nav，它是一个组件。

<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>

下面是我的地址页代码，其他页面与此类似。

<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>
<a href="#" class="btn btn-light">Make 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>Moscow, Russia</h6>
<p>
Lenin street <br />
Building A, Floor: 3, Aprt: 32
</p>
<a href="#" class="btn btn-light">Make 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>
<!-- row.// -->
</main>
</div>
</div>
</section>
</template>
<script>
import sidenav from "~/components/profile-sidenav";
export default {
components: {
sidenav,
},
};
</script>

我已经将帐户概览设置为活动页面，当我转到地址页面时，我需要"我的地址"选项卡处于活动状态。我该怎么做？我试过了，但没用。

Answer 1

不要使用<a>标记，而是使用<nuxt-link>。然后，在css中，设置.nuxt-link-exact-active类的样式——例如：

.nuxt-link-exact-active {
font-weight: bold;
}

现在，如果您有<nuxt-link to=“/address”>My Address</nuxt-link>，并且用户在/address页面上，那么类将添加到nuxt链接元素中。