С vue.js, как мне установить активный тег на текущий активный путь? - PullRequest
Новая
       17

С vue.js, как мне установить активный тег на текущий активный путь?

0 голосов
/ 08 июля 2019

В моем шаблоне у меня есть 


      <ul class="nav nav-pills nav-fill">
        <li class="nav-item">
          <router-link
            :to="{
            name: 'ConversationDetailHighlights',
            params: {
              id: conversation.id
            }
          }"
            class="nav-link"
            active-class="active"
            v-bind:class="{active: currentlyActive === 'ConversationDetailHighlights'}"
          >Highlights</router-link>
        </li>
        <li class="nav-item">
          <router-link
            :to="{
            name: 'ConversationDetailFullTranscript',
            params: {
              id: conversation.id
            }
          }"
            class="nav-link"
            active-class="active"
            v-bind:class="{active: currentlyActive === 'ConversationDetailFullTranscript'}"
          >Full Transcript</router-link>
        </li>
      </ul>

И в моем сценарии: 

  data() {
    return {currentlyActive = 'ConversationDetailHighlights'}
  }
  watch: {
    $route(to) {
      this.currentlyActive = to.name;
    }
  },
  mounted() {
    this.currentlyActive = this.$route.name;
  },

Однако, когда я нажимаю Transcript, оба li active.Как заставить highlights стать неактивным?

1 Ответ

1 голос
/ 08 июля 2019

Вы делаете это слишком сложно. vue-router уже содержит все необходимое для установки css-класса для активных <router-link> компонентов.

Цитировать с Начало работы

Обратите внимание, что класс автоматически получает класс .router-link-active, когда сопоставляется его целевой маршрут. Вы можете узнать больше об этом в справочнике по API.

Так что все, что вам нужно сделать, это стиль .active css-класса, который вы выбрали с помощью active-class prop.

Обратите внимание , что несколько маршрутов могут совпадать одновременно. Например. / всегда будет совпадать. В этом случае вы должны поставить точный атрибут: 

<router-link to="/" exact active-class="active" />
...