Vue + Nuxt js：如何使用引导导航栏将动态活动类应用于父菜单

Posted 2023-02-22

【中文标题】Vue + Nuxt js：如何使用引导导航栏将动态活动类应用于父菜单

【英文标题】：Vue + Nuxt js: How to apply dynamic active class to parent menu using bootstrap navbar

【发布时间】：2019-10-06 19:27:34

【问题描述】：

我是 vue + nuxt.js 的新手

我正在使用引导导航栏。看到这个link

我有以下代码。

<b-nav-item-dropdown type="dark">
          <template slot="button-content">
            <i class="fas fa-user"></i> Users
          </template>
          <b-dropdown-item ref="users" to="/users" nuxt-link-active="/users"
            >Listing
          </b-dropdown-item>
          <b-dropdown-item to="/users/add" nuxt-link-active="/users/add"
            >Add new user
          </b-dropdown-item>
        </b-nav-item-dropdown>
        <b-nav-item-dropdown bg-transparent>
          <template slot="button-content">
            <i class="fas fa-users"></i> Teams
          </template>
          <b-dropdown-item to="/teams" nuxt-link-active="/teams"
            >Listing
          </b-dropdown-item>
          <b-dropdown-item to="/teams/add" nuxt-link-active="/teams/add"
            >Add new team
          </b-dropdown-item>
        </b-nav-item-dropdown>

现在我希望在单击子项时打开父菜单。在当前情况下，当我单击团队列表时，它会关闭父 div，因此无法识别打开了哪个菜单。此外，当我点击用户列表时，它应该关闭团队菜单。

我通过谷歌搜索尝试了很多方法。但找不到合适的解决方案。

【参考方案1】：

偶然发现了这个问题。如果您仍然需要，这是我的答案。

您不应在 Bootstrap Vue 元素中使用 nuxt-link-active。

你可能宁愿使用：

<b-dropdown-item to="/teams" exact exact-active-class="active">
   Listing
</b-dropdown-item>