With vue.js, how do I set an active tag to the currently active path?

Question

In my template, I have

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

And in my script:

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

However, when I click the Transcript, both li's are active. How do I get the highlights one to become inactive?

Answer 1

You are doing this far too complicated. vue-router already contains all you need to set a css-class on the active <router-link> components.

To quote from Getting Started

Notice that a automatically gets the .router-link-active class when its target route is matched. You can learn more about it in its API reference.

So all you need to do is style the .active css-class that you chose with the active-class prop.

Note that multiple routes may match at any one time. E.g. / will always match. In that case you should put the exact attribute:

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