bootstrap vue 所有带有路由器链接的 b-dropdown-item 都处于活动状态答案

【问题标题】：bootstrap vue all b-dropdown-item with router link are activebootstrap vue 所有带有路由器链接的 b-dropdown-item 都处于活动状态
【发布时间】：2019-06-14 02:06:05
【问题描述】：

我真的很喜欢 Vue 和 Bootstrap Vue - 非常好。然而，一个小问题 - 这是我的模板：

<template>
  <div >
    <b-dropdown variant="link" size="lg" no-caret>
      <template slot="button-content">
        <img src="../assets/logo.png">
      </template>
      <div v-for="row in navOptions" :key="row.id">
        <b-dropdown-item v-bind:to="row.url" >{{ row.text }}</b-dropdown-item>
      </div>
      <b-dropdown-item>User</b-dropdown-item>
    </b-dropdown>
  </div>
</template>

为 v-for 循环中的项目生成的 html 是：

<a data-v-6949e825="" href="/xxxx/map" class="dropdown-item active" role="menuitem" target="_self">Map</a>

我的问题是添加到类中的“活动”，它看起来很糟糕：并且不相关，因为这些项目未处于活动状态。

<b-nav-item> 我也有同样的问题

是否有引导 vue 方法来禁用“活动”？

【问题讨论】：

在角度我知道有一个名为[routerLinkActiveOptions]="{exact: true}"的选项，它跟踪路由器链接并只给它提供活动类。尝试像这样在vue中查找
是的，在这一行加上“exact”：<b-nav-item v-bind:to="row.url" exact>{{ row.text }}</b-nav-item>表示只高亮匹配的路由，这是一个改进。谢谢你:)

标签： vue.js vuejs2 bootstrap-4

【解决方案1】：

你可以这样做：

<router-link to="/" tag="li" active-class="active" exact><a>Home</a></router-link>

这将创建一个

带有 active 属性的标签，并将根据路由进行更改。

如果您要创建嵌套路由，例如 /something/somethingelse 是为了在 /something li 添加活动类，您需要添加确切的属性

【讨论】：