Add topic slug to route params

client/src/components/TopNavigation.vue

@@ -1,6 +1,6 @@
 <template>
   <nav class="top-navigation">
-    <router-link to="/book/topic" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link>
+    <router-link to="/book/topic/geld-und-kauf" active-class="top-navigation__link--active" class="top-navigation__link">Inhalte</router-link>
     <router-link to="/rooms" active-class="top-navigation__link--active" class="top-navigation__link">Räume</router-link>
     <router-link to="/404" active-class="top-navigation__link--active" class="top-navigation__link">Portfolio</router-link>
   </nav>

client/src/pages/start.vue

@@ -6,7 +6,7 @@
         class="start-sections__section"
         title="Inhalte"
         subtitle="Lernen"
-        route="/book/topic"
+        route="/book/topic/geld-und-kauf"
       ></section-block>
       <section-block
         class="start-sections__section"

client/src/pages/topic.vue

@@ -20,13 +20,15 @@
     },
 
     apollo: {
-      topic: {
+      topic() {
-        query: TOPIC_QUERY,
+        return {
-        variables: {
+          query: TOPIC_QUERY,
-          slug: 'geld-und-kauf'
+          variables: {
-        },
+            slug: this.$route.params.topicSlug
-        update(data) {
+          },
-          return this.$getRidOfEdges(data).topic || {};
+          update(data) {
+            return this.$getRidOfEdges(data).topic || {};
+          }
         }
       }
     },

client/src/router/index.js

@@ -48,7 +48,7 @@ const routes = [
     name: 'book',
     component: book,
     children: [
-      {path: 'topic', component: topic}
+      {path: 'topic/:topicSlug', component: topic}
     ]
   },
   {path: '*', component: p404}