使用 nuxt/vue 的导航栏活动选项卡答案

【问题标题】：navbar active tab using using nuxt/vue使用 nuxt/vue 的导航栏活动选项卡
【发布时间】：2021-02-22 06:40:42
【问题描述】：

我有一个侧边导航栏，我正在尝试根据页面点击使其处于活动状态。

这是我的 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>

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

【问题讨论】：

你在使用引导程序吗？
是但不是 vue-bootstrap。我正在使用cdn

标签： html vue.js nuxtjs

【解决方案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-link 元素中。

【讨论】：