web-dev-qa-db-ja.com

Bootstrap VueJSvue-routerのナビゲーションピル

bootstrap公式ドキュメントでは、クールなナビゲーションピルセットを見てきました。これがそれです。

<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</a>
  <a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</a>
  <a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</a>
  <a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</a>
</div>
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">...</div>
  <div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab">...</div>
  <div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">...</div>
  <div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">...</div>
</div>

これは私が現在ナビゲーションに使用しているコードです。

<ul class="nav flex-column">
          <li class="nav-item">
            <router-link to="/studentDashboard">Dashboard</router-link>
          </li>

          <li class="nav-item">
            <router-link to="/buyPapers">Buy papers</router-link>
          </li>

          <li class="nav-item" >
            <router-link to="/myPapers">My papers</router-link>
          </li>

  </ul>

このコードでそのピルを使用するには、何を変更する必要がありますか？

vue.jsbootstrap-4vue-router
7
Pathum Kalhan
<router-link> by defult is rendered as an achor tag `<a>`.

Bootstap 4 nav-pillには、クラス<a>のnav-linkタグがあります。以下のように：

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  </li>
</ul>

したがって、そのクラスを<router-link>に追加するだけです。

<li class="nav-item">
  <router-link class="nav-link" active-class="active" to="/studentDashboard">Dashboard</router-link>
</li>

現在アクティブなルートを表すnav-pillにactiveクラスを追加するには、すべての `にactive-classpropを追加します。

9
Vamsi Krishna

Bootstrapの代わりに、アクティブなタブとタブコンテンツのVueルーターコントロール表示）を使用します。各tab-paneは、ルータービューの表示を制御するためにルーターが使用されているため、activeクラスが必要です。

const home = { template: '<div class="tab-pane active">Home...</div>' }
const profile = { template:'<div class="tab-pane active">Profile.. </div>' }
const more  = { template:'<div class="tab-pane active">More..</div>' }

次に、メソッドを使用して、各ナビゲーションピルにactiveクラスを条件付きで設定します。

methods: {
      activeClass: function (...names) {
        for (let name of names) {
            if (name == this.$route.name)
                return 'active';
      }
    }    
}

HTML

<ul class="nav nav-pills">
    <li class="nav-item">
         <router-link to="/home" class="nav-link" :class="activeClass('home')">Home</router-link>
    </li>
    <li class="nav-item">
         <router-link to="/profile" class="nav-link" :class="activeClass('profile')">Profile</router-link>
    </li>
    <li class="nav-item">
         <router-link to="/more" class="nav-link" :class="activeClass('more')">More</router-link>
    </li>
</ul>
<div class="tab-content">
      <router-view></router-view>
</div>

デモ： https://www.codeply.com/go/WVx1HswJ8

1
Zim