引导vue具有路由器链接的所有b-dropdown项目均处于活动状态

Question

我真的很喜欢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方式禁用“活动”？

Answer 1

您可以执行以下操作：

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

这将创建一个具有active属性的

标记，并将基于该路由进行更改。

如果要创建/ something / somethingelse之类的嵌套路由，则要在/ something li处添加活动类，则需要添加确切的属性