based navigation on router

src/views/HelpPage.vue

@@ -1,18 +1,31 @@
 <template>
     <div class="help">
-        <p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
-        <router-link to="/questionnaire"><button>Zurück zur Frage</button></router-link>
+        <p>{{ $store.state.questions[$route.params.id].description }}</p>
+        <router-link v-bind:to="'/questionnaire/' + $route.params.id"><button>Zurück zur Frage</button></router-link>
         <br><br>
-        <router-link to="/questionnaire"><button v-on:click="$store.commit('nextQuestion')" class="alert">Ich möchte diese Frage überspringen</button></router-link>
+        <button v-on:click="nextQuestion()" class="alert">Ich möchte diese Frage überspringen</button>
     </div>
 </template>
 
 <script>
+    import router from "@/router";
+
     export default {
         name: "HelpPage",
         props: {
             text: String
-        }
+        },
+        methods: {
+            nextQuestion() {
+                if (this.$route.params.id < this.$store.state.questions.length - 1) {
+                    const nextQuestion = parseInt(this.$route.params.id) + 1
+                    this.$router.push("/questionnaire/" + nextQuestion)
+                }
+                else {
+                    router.push('/results')
+                }
+            },
+        },
     }
 </script>
 

src/views/Questionnaire.vue

@@ -4,9 +4,9 @@
             <div v-bind:key="n" v-for="n in $store.state.questions.length" v-bind:class="getDotClass(n)"></div>
         </div>
         <Question
-                v-bind:type="$store.state.questions[$store.state.currentQuestion].type"
-                v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
-                v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></Question>
+                v-bind:type="$store.state.questions[$route.params.id].type"
+                v-bind:question="$store.state.questions[$route.params.id].question"
+                v-bind:answers="$store.state.questions[$route.params.id].answers"></Question>
     </div>
 </template>
 
@@ -17,7 +17,7 @@
         components: {Question},
         methods: {
             getDotClass(n) {
-                if (n <= this.$store.state.currentQuestion) {
+                if (n <= this.$route.params.id) {
                     return "point answered"
                 } else {
                     return "point"

src/views/Warning.vue

@@ -24,6 +24,6 @@
         Bereitschaftsdienst unter 116117 an.
       </p>
     </div>
-    <router-link v-on:click="this.$store.commit('startWithFirstQuestion')" style="text-decoration:none" to="/questionnaire"><button>Ich möchte weiter zum Test</button></router-link>
+    <router-link style="text-decoration:none" to="/questionnaire/0"><button>Ich möchte weiter zum Test</button></router-link>
   </div>
 </template>