Using router-link slots for header link indicators. Added release cache to store.

assets/components/header/header.vue

@@ -1,7 +1,7 @@
 <template>
     <header class="header">
         <router-link
-            to="/"
+            to="/home"
             class="logo-link"
         ><h1 class="logo"><Icon icon="logo" /></h1></router-link>
 
@@ -9,31 +9,46 @@
             <ul class="nolist">
                 <li class="nav-item">
                     <router-link
+                        v-slot="{ isActive, navigate }"
                         to="/actors"
+                    >
+                        <a
                             class="nav-link"
-                        :class="{ active: active === 'actors' }"
+                            :class="{ active: isActive }"
+                            @click="navigate"
                         >
                             <Icon icon="stars" /><span class="nav-label">Actors</span>
+                        </a>
                     </router-link>
                 </li>
 
                 <li class="nav-item">
                     <router-link
+                        v-slot="{ isActive, navigate }"
                         to="/networks"
+                    >
+                        <a
                             class="nav-link"
-                        :class="{ active: active === 'networks' }"
+                            :class="{ active: isActive }"
+                            @click="navigate"
                         >
                             <Icon icon="earth2" /><span class="nav-label">Networks</span>
+                        </a>
                     </router-link>
                 </li>
 
                 <li class="nav-item">
                     <router-link
+                        v-slot="{ isActive, navigate }"
                         to="/tags"
+                    >
+                        <a
                             class="nav-link"
-                        :class="{ active: active === 'tags' }"
+                            :class="{ active: isActive }"
+                            @click="navigate"
                         >
                             <Icon icon="price-tags" /><span class="nav-label">Tags</span>
+                        </a>
                     </router-link>
                 </li>
             </ul>
@@ -41,18 +56,6 @@
     </header>
 </template>
 
-<script>
-function active() {
-    return this.$route.name;
-}
-
-export default {
-    computed: {
-        active,
-    },
-};
-</script>
-
 <style lang="scss" scoped>
 @import 'theme';
 
@@ -97,6 +100,7 @@ export default {
     text-decoration: none;
     font-size: .9rem;
     font-weight: bold;
+    cursor: pointer;
 
     .icon {
         fill: $shadow;

assets/components/home/home.vue

@@ -17,6 +17,10 @@ import Releases from '../releases/releases.vue';
 
 async function fetchReleases() {
     this.releases = await this.$store.dispatch('fetchReleases', { limit: 100 });
+    this.$store.commit('setCache', {
+        target: 'home',
+        releases: this.releases,
+    });
 }
 
 async function mounted() {
@@ -39,6 +43,7 @@ export default {
     },
     data() {
         return {
+            // releases: this.$store.state.releases.cache.home || [], // slows down apparent page load
             releases: [],
             networks: [],
             pageTitle: null,

assets/js/releases/mutations.js

@@ -1 +1,14 @@
-export default {};
+import Vue from 'vue';
+
+function setCache(state, { target, releases }) {
+    Vue.set(state.cache, target, releases);
+}
+
+function deleteCache(state, target) {
+    Vue.delete(state.cache, target);
+}
+
+export default {
+    setCache,
+    deleteCache,
+};

assets/js/releases/state.js

@@ -1 +1,3 @@
-export default {};
+export default {
+    cache: {},
+};