如何在 bootstrap-vue 的导航栏中为活动 class 指定相同的 href link？

Question

我用这个导航栏。当 href links 不同时没关系。但是，当两个页面具有相同的 link 时，两个 li 都会出现活动的 class，并且按照我写的方式 link。

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;
  }

  &.disabled {
    color: $navBar-disabled-color;
    pointer-events: none;
    cursor: default;
  }

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

    &: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 && 'active', isExactActive && 'exact-active']">
        <a
          v-t="name"
          href="linkHref"
          class="navLink"
        />
      </li>
    </router-link>
  </ul>
</div>

我怎样才能拥有页面的 sameLink 但仅在页面显示且真正处于活动状态时才处于活动状态？由于一些过滤器，这些页面在内容上有所不同，但它们具有相同的 link.

Answer 1

属性 isActive 和 isExactActive 对于指向同一路由的 router-link 是相同的，菜单项 page2 就是这种情况和 page3 在你的例子中。您可以将它们定义为指向同一路由器视图组件的不同路由

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

然后将当前路由名称与每个link的路由名称进行比较，以确定确切的活动class：

<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 && $route.name === name && 'exact-active']">
        <a
          v-t="name"
          href="linkHref"
          class="navLink"
        />
      </li>
    </router-link>
  </ul>
</div>

如何在 bootstrap-vue 的导航栏中为活动 class 指定相同的 href link？

How specify same href link for active class in navbar in bootstrap-vue?

css

vue.js

bootstrap-vue