Блог

Главная - Вопросы по программированию - Как указать ту же ссылку href для активного класса в панели навигации в bootstrap-vue?

Как указать ту же ссылку href для активного класса в панели навигации в bootstrap-vue?

#css #vue.js #bootstrap-vue

Вопрос:

Я использую эту навигационную панель. И это нормально, когда ссылки на href отличаются. Но когда на двух страницах есть одна и та же ссылка, для обеих страниц появляется активный класс с этой ссылкой в том, как я пишу.

 Vue.component('navbar', {
  template: `<svg xmlns="http://www.w3.org/2000/svg" width="15.352" height="15.355" viewBox="0 0 15.352 15.355">
        <path id="Union_19" data-name="Union 19" d="M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z" transform="translate(27.176 15966.178)" fill="none" stroke="#bbb" stroke-width="0.5"/>
    </svg>`
})

new Vue({
  el: "#app",
  data() {
      return {
        menu: [
        { to: { name: 'link1' }, name: 'page1' },
        { to: { name: 'sameLink' }, name: 'page2' },
        { to: { name: 'sameLink' }, name: 'page3' },
        { to: { name: 'link2' }, name: 'page4' }
        ]
      }
    }
}); 
 .nav {
  display: flex;
  flex-wrap: nowrap;
  margin-bottom: 0;
  list-style: none;
  font-size: .875rem;
  overflow: auto;
  background-color: $navBar-bg;
}

.navLink {
  display: block;
  color: $navBar-color;
  text-decoration: none;
  position: relative;
  white-space: nowrap;

  @include hover-focus() {
    text-decoration: none;
    color: $navBar-hover-color;
  }

  amp;.disabled {
    color: $navBar-disabled-color;
    pointer-events: none;
    cursor: defau<
  }

  :global(.show) > amp;,
  :global(.active) > amp;,
  .nav-link:global(.show),
  .nav-link:global(.active) {
    color: red;

    amp;:after {
      content: '';
      display: block;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: .1875rem;
      background-color: currentColor;
    }
  }
} 
 <link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" />

<script src="https://unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app">
  <ul class="nav">
   <router-link
      v-for="{ to, name } in menu"
      v-slot="{ href: linkHref, navigate, isActive, isExactActive }"
      :key="to.name || name"
      :to="to"
    >
      <li v-else :class="['nav-item', isActive amp;amp; 'active', isExactActive amp;amp; 'exact-active']">
        <a
          v-t="name"
          href="linkHref"
          class="navLink"
        />
      </li>
    </router-link>
  </ul>
</div>

Как я могу иметь одинаковую ссылку для страниц, но быть активным только на той странице, которая показана и действительно активна?
Эти страницы отличаются по содержанию из-за некоторых фильтров, но обе имеют одну и ту же ссылку.

Ответ №1:

Свойства isActive и isExactActive будут одинаковыми для ссылок маршрутизатора, которые указывают на один и тот же маршрут, как в случае с пунктами меню page2 и page3 в вашем примере. Вы можете определить их как разные маршруты, указывающие на один и тот же компонент представления маршрутизатора

 const routes = [
  { name: 'page2', path: '/foo', component: Foo },
  { name: 'page3', path: '/foo', component: Foo }
]

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

 <div id="app">
  <ul class="nav">
   <router-link
      v-for="{ to, name } in menu"
      v-slot="{ href: linkHref, navigate, isActive, isExactActive }"
      :key="to.name || name"
      :to="to"
    >
      <li v-else :class="['nav-item', isExactActive amp;amp; $route.name === name amp;amp; 'exact-active']">
        <a
          v-t="name"
          href="linkHref"
          class="navLink"
        />
      </li>
    </router-link>
  </ul>
</div>
Метки: