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