Добавление «активного» класса в Bootstrap Nuxt.js

Question

Я использую Nuxt.js и хочу добавить активный класс к элементу навигации. Следующий код - это то, что я придумал для навигации:

<div>
  <b-navbar type="dark" variant="dark">
    <b-navbar-nav>
      <b-nav-item href="/">Home</b-nav-item>
      <b-nav-item href="/locations">Locations</b-nav-item>
    </b-navbar-nav>
  </b-navbar>
</div>

Вопрос в том, как я могу использовать активный класс?

Answer 1

Вы можете добавить active к вашему b-nav-item

<div>
  <b-nav>
    <b-nav-item active>Active</b-nav-item>
    <b-nav-item>Link</b-nav-item>
    <b-nav-item>Another Link</b-nav-item>
    <b-nav-item disabled>Disabled</b-nav-item>
  </b-nav>
</div>