based navigation on router

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <div id="app">
-    <router-view/>
+    <transition name="fade">
+      <router-view/>
+    </transition>
   </div>
 </template>
 
@@ -86,4 +88,11 @@
     line-height: 1.35em;
     font-size: 24px;
   }
+
+  .fade-enter-active, .fade-leave-active {
+    transition: opacity .5s;
+  }
+  .fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
+    opacity: 0;
+  }
 </style>

src/components/Question.vue

@@ -29,13 +29,15 @@
                         v-for="answer in answers"
                         v-on:click="answerQuestion(answer.value)">{{ answer.text }}</button>
             </div>
-            <router-link to="/questionnaire/help" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
+            <router-link v-bind:to="'/questionnaire/help/' + $route.params.id" style="text-decoration: none"><button class="alert">Ich brauche Hilfe zu dieser Frage</button></router-link>
             <svg v-if="$store.state.currentQuestion != 0" v-on:click="goBack()" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="48" height="48"><path fill="none" d="M0 0h24v24H0z"/><path d="M8 11.333l10.223-6.815a.5.5 0 0 1 .777.416v14.132a.5.5 0 0 1-.777.416L8 12.667V19a1 1 0 0 1-2 0V5a1 1 0 1 1 2 0v6.333z"/></svg>
         </div>
     </div>
 </template>
 
 <script>
+    import router from "@/router";
+
     export default {
         name: "Question",
         props: {
@@ -50,11 +52,24 @@
         },
         methods: {
             answerQuestion(value) {
-                this.$store.commit('answerQuestion', value)
+                this.$store.commit('answerQuestion', {
-                this.$store.commit('nextQuestion')
+                    id: this.$route.params.id,
+                    answer: value
+                })
+
+                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')
+                }
             },
             goBack() {
-                this.$store.commit('previousQuestion')
+                if (this.$route.params.id > 0) {
+                    const previousQuestion = parseInt(this.$route.params.id) - 1
+                    this.$router.push("/questionnaire/" + previousQuestion)
+                }
             },
         },
         mounted () {

src/router/index.js

@@ -20,12 +20,12 @@ const routes = [
     component: Warning
   },
   {
-    path: '/questionnaire',
+    path: '/questionnaire/:id',
     name: 'Fragebogen',
     component: Questionnaire
   },
   {
-    path: '/questionnaire/help',
+    path: '/questionnaire/help/:id',
     name: 'Hilfe',
     component: HelpPage
   },

src/store/index.js

@@ -1,36 +1,20 @@
 import Vue from 'vue'
 import Vuex from 'vuex'
 import axios from 'axios';
-import router from "@/router";
-
 
 Vue.use(Vuex)
 
 export default new Vuex.Store({
     state: {
-        currentQuestion: 0,
         answers: [],
         questions: []
     },
     mutations: {
-        nextQuestion() {
-            if (this.state.currentQuestion <
-                this.state.questions.length - 1)
-                this.state.currentQuestion += 1
-            else {
-                router.push('/results')
-            }
-        },
-        previousQuestion() {
-            if (this.state.currentQuestion > 0) {
-                this.state.currentQuestion -= 1
-            }
-        },
         startWithFirstQuestion() {
             this.state.currentQuestion = 0
         },
-        answerQuestion(state, value) {
+        answerQuestion(state, pl) {
-            this.state.answers[this.state.currentQuestion] = value
+            this.state.answers[pl.id] = pl.answer
         },
         init() {
             axios.get('https://avian-safeguard-214619.firebaseio.com/questions.json')

src/views/HelpPage.vue

@@ -1,18 +1,31 @@
 <template>
     <div class="help">
-        <p>{{ $store.state.questions[$store.state.currentQuestion].description }}</p>
+        <p>{{ $store.state.questions[$route.params.id].description }}</p>
-        <router-link to="/questionnaire"><button>Zurück zur Frage</button></router-link>
+        <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:type="$store.state.questions[$route.params.id].type"
-                v-bind:question="$store.state.questions[$store.state.currentQuestion].question"
+                v-bind:question="$store.state.questions[$route.params.id].question"
-                v-bind:answers="$store.state.questions[$store.state.currentQuestion].answers"></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>