Links.vue

<template>
  <ul class="nav nav-tabs">
    <li role="presentation" v-bind:class="{ active: $route.name === 'home' }">
      <router-link to="/">
        Home
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'about' }">
      <router-link to="/about">
        About
      </router-link>
    </li>
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'condensates' }">-->
      <!--<router-link to="/condensates">-->
        <!--Condensates-->
      <!--</router-link>-->
    <!--</li>-->
    <!--<li role="presentation" v-bind:class="{ active: $route.name === 'browse' }">-->
      <!--<router-link to="/browse">-->
        <!--Browse-->
      <!--</router-link>-->
    <!--</li>-->
    <li role="presentation" v-bind:class="{ active: $route.name === 'biomolecular' }">
      <router-link to="/biomolecular">
        Biomolecular Condensates
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'synthetic' }">
      <router-link to="/synthetic">
        Synthetic Condensates
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'condensate_example' }">
    <router-link to="/condensate_example">
      Condensate Example
    </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'protein_example' }">
      <router-link to="/protein_example">
        Protein Example
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'statistics' }">
      <router-link to="/statistics">
        Statistics
      </router-link>
    </li>
    <li role="presentation" v-bind:class="{ active: $route.name === 'encyclopedia' }">
      <router-link to="/encyclopedia">
        Encyclopedia
      </router-link>
    </li>
  </ul>
</template>

<script>
export default {
  name: "Links",
  mounted: function () {
    // console.log(this.$route.name)
  }
}
</script>