add active state to route links

src/App.vue

@@ -8,17 +8,8 @@
             <span class="sr-only">Menu</span>
           </template>
 
-          <b-dropdown-item :to="{ name: 'home' }">
-            {{ $t('sections.home') }}
-          </b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'introduction' }">
-            {{ $t('sections.introduction') }}
-          </b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'blog' }">
-            {{ $t('sections.blog') }}
-          </b-dropdown-item>
-          <b-dropdown-item :to="{ name: 'contact' }">
-            {{ $t('sections.contact') }}
+          <b-dropdown-item v-for="name in subRoutes" :key="name" :to="{ name }">
+            {{ $t('sections.' + name) }}
           </b-dropdown-item>
         </b-dropdown>
 
@@ -26,15 +17,12 @@
           {{ $t('title') }}
         </b-navbar-brand>
 
-        <b-nav class="ml-auto">
-          <b-nav-item :to="{ name: 'library' }">
-            {{ $t('sections.library') }}
-          </b-nav-item>
-          <b-nav-item :to="{ name: 'kit' }">
-            {{ $t('sections.kit') }}
-          </b-nav-item>
-          <b-nav-item :to="{ name: 'gallery' }">
-            {{ $t('sections.gallery') }}
+        <b-nav class="ml-auto" pills>
+          <b-nav-item
+            v-for="name in mainRoutes" :key="name"
+            :to="{ name }" :active="$route.name === name"
+          >
+            {{ $t('sections.' + name) }}
           </b-nav-item>
         </b-nav>
       </b-navbar>
@@ -59,6 +47,13 @@ export default {
       // all titles will be injected into this template
       titleTemplate: '%s | ' + this.$t('title')
     }
+  },
+
+  data () {
+    return {
+      mainRoutes: ['library', 'kit', 'gallery'],
+      subRoutes: ['home', 'introduction', 'blog', 'contact']
+    }
   }
 }
 </script>