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