bootstrap vue все b-dropdown-item с роутером активны

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>

Сгенерированный HTML для элементов в цикле v-for:

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

Моя проблема заключается в том, что "активный"добавлен в класс, выглядит плохо: и не имеет значения, так как элементы не активны.

У меня такая же проблема с <b-nav-item>

Есть ли способ начальной загрузки для отключения «активного»?

Answer 1

Вы можете сделать что-то вроде этого:

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

Это создаст тег

с активным свойством и будет меняться в зависимости от маршрута.

Если вы создаете вложенные маршруты, например, что-то / что-то, значит добавить активный класс в / что-то, вам нужно добавить точное свойство