导航栏活动选项卡使用 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>

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

Answer 1

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

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

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

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

navbar active tab using using nuxt/vue

html

vue.js

nuxtjs