Cannot pass an object to a new route using props - vuejs2

Question

I am working on a project where a user fills in a quiz and the results need to be passed to a new page. The quiz has the Quiz component, where the quiz is taken, and the QuizFinished component, where the user can go to the Results page. I have been able to pass the quiz answers to QuizFinished, but the problem lies in passing the answers from QuizFinished to QuizResults. I have copied some code from here which is from this stackoverflow question, but the code does not work.
Am I missing something here?
Any help would be much appreciated.
Quiz.vue
<template>
<div class="quiz-background py-5" id="mood-finder">
<b-container class="text-center">
<h1 class="">Mood finder</h1>
<component
<!-- This event is triggered when a question is answered in Question.vue, that works -->
v-on:click="_answerQuestion($event)"
<!-- Going from the startpage to the quiz -->
v-on:start="this.startQuiz"
v-bind:is="component"
<!-- Binds the answers to be read in QuizResult -->
:answers="answers"
ref="question"
/>
<b-row class="d-flex justify-content-center">
<b-col cols="12" md="8" class="pt-3">
<!-- A progress bar -->
<b-progress
variant="primary"
aria-label="Voortgang van de Moodfinder"
:value="progress"
:max="maxProgress"
></b-progress>
</b-col>
</b-row>
</b-container>
</div>
</template>
<script>
import quizStart from "./QuizStart.vue";
import question from "./Question";
import strawberry from "../assets/strawberry.webp";
import banana from "../assets/banana.webp";
import quizFinished from "./QuizFinished.vue";
export default {
name: "app",
components: {
quizStart,
question,
quizFinished,
},
data() {
return {
questionIndex: 0,
<!--The array with the answers. It is put in an object to circumvent the array limitation by Vue: https://github.com/vuejs/vue/issues/1798 -->
answers: {array: []},
component: "quizStart",
strawberry: strawberry,
banana: banana,
progress: 0,
maxProgress: 99,
};
},
methods: {
/**
* #description
* saved pressed answer text in answers array
*/
_answerQuestion(chosenItem) {
this.answers.array.push(chosenItem);
this.switchQuestion();
},
startQuiz(){
this.component= "question"
},
/**
* #description switches the questions when the user performs an action in the quiz
* it swaps out the quiz images, text and quiz question for each question.
*/
switchQuestion() {
/**
* questionIndex stands for the question the user would like to go to.
* So e.g questionIndex = 1 is going to the second question (counting from 0)
*/
this.questionIndex++;
switch (this.questionIndex) {
case 0:
this.progress = 0;
break;
// //For question 1, see Question.Vue data field
case 1:
this.$refs.question.setQuestion("Question 2");
this.$refs.question.setItems(
{ name: "strawberry", variety: "sweet" },
{ name: "strawberry", variety: "sweet" },
{ name: "strawberry", variety: "sweet" },
{ name: "strawberry", variety: "sweet" }
);
this.$refs.question.setImage(
this.strawberry,
this.strawberry,
this.strawberry,
this.strawberry
);
this.progress = 33;
break;
case 2:
console.log(this.questionIndex)
this.$refs.question.setQuestion("Question 3");
this.$refs.question.setItems(
{ name: "banana", variety: "sweet" },
{ name: "banana", variety: "sweet" },
{ name: "banana", variety: "sweet" },
{ name: "banana", variety: "sweet" }
);
this.$refs.question.setImage(
this.banana,
this.banana,
this.banana,
this.banana
);
this.progress = 66;
break;
case 3:
this.progress = 99;
//Goes to the quizFinished component
this.component = quizFinished;
}
},
},
};
</script>
//removed the styles
QuizFinished.vue:
<template>
<b-row class="d-flex justify-content-center py-3">
<b-col class="col-6 col-lg-2">
<p class="text-white">
De Mood finder is gemaakt. Je resultaten staan klaar!
</p>
<!-- <router-link :to="{ path: '/results/', params: { answers: answers } }"
><button class="btn btn-primary" type="button">
Verder naar resultaten
</button></router-link
> -->
<br />
<router-link :to="{ name: 'results', params: { params: answers} }"
>Go to results</router-link>
<!-- For testing purposes, the answers are shown here as: { "array": [{object1} etc.]} -->
{{ answers }}
</b-col>
</b-row>
</template>
<script>
export default {
name: "quizFinished",
props: {
//For reasoning behind type: Object, see previous codeblock
answers: { type: Object, required: false },
},
};
</script>
//removed styles
QuizResult.vue
<!-- Html here -->
<script>
export default {
props: {
params: { type: Object, required: false },
},
mounted() {
//returns undefined, adding a html object like this: {{params}} returns nothing
console.log(this.params);
}
};
</script>
//removed styles
main.js:
import Vue from 'vue';
import App from './App.vue';
import VueRouter from 'vue-router';
import './registerServiceWorker';
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue';
import 'bootstrap-vue/dist/bootstrap-vue.css';
import '../src/scss/bootstrap.css';
// Import for fontAwesome : svg-core, brand icons and vue
import { library } from '#fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '#fortawesome/vue-fontawesome';
import { fab } from '#fortawesome/free-brands-svg-icons';
import VueMeta from 'vue-meta';
library.add(fab);
// fontawesome component neccesary to call
Vue.component('font-awesome-icon', FontAwesomeIcon, fab);
// Make BootstrapVue available throughout your project
Vue.component('font-awesome-icon', FontAwesomeIcon, fab);
Vue.use(BootstrapVue);
Vue.use(IconsPlugin);
Vue.use(VueRouter);
Vue.use(VueMeta);
import results from './components/pages/Results';
import index from './components/pages/Index';
import pageNotFound from './components/pages/PageNotFound';
import webshop from './components/pages/Webshop';
const resultsRoute = { path: '/results', name: 'results', component: results, props: true, };
const indexRoute = { path: '/', name: 'index', component: index };
const pageNotFoundRoute = { path: '*', name: 'pageNotFound', component: pageNotFound };
const webshopRoute = { path: '/webshop', name: 'webshop', component: webshop };
const routes = [resultsRoute, indexRoute, pageNotFoundRoute, webshopRoute];
const router = new VueRouter({
routes,
mode: 'history',
});
Vue.config.productionTip = false;
new Vue({
router,
render: function(h) {
return h(App);
},
}).$mount('#app');

Answer 1

Here's a very quick snippet to show quiz using VueRouter:
const QuizStart = {
template: `
<div><router-link :to="'/question/0'">START</router-link></div>
`
}
const QuizQuestion = {
props: ['qidx', 'questions'],
computed: {
question() {
return this.questions[this.qidx]
},
},
methods: {
setAnswer(val) {
this.$emit('set-answer', {
id: this.qidx,
answer: val
})
let next = ''
if (Number(this.qidx) < this.questions.length - 1) {
next = `/question/${ Number(this.qidx) + 1 }`
} else {
next = '/result'
}
this.$router.push(next)
},
},
template: `
<div>
{{ question.text }}:<br />
<button #click="() => setAnswer(1)">YES</button> | <button #click="() => setAnswer(-1)">NO</button>
</div>
`
}
const QuizResult = {
props: ['questions'],
computed: {
computedResult() {
return this.questions.reduce((a, c) => a + c.answer, 0)
}
},
template: `
<div>
Your score is {{ computedResult }}
</div>
`
}
const routes = [{
path: '/',
component: QuizStart
},
{
path: '/question/:qidx',
component: QuizQuestion,
props: true
},
{
path: '/result',
component: QuizResult
},
]
const router = new VueRouter({
routes // short for `routes: routes`
})
new Vue({
el: "#app",
components: {
QuizStart,
QuizQuestion,
QuizResult,
},
router,
data() {
return {
questions: [{
text: 'Is this the first question?',
answer: null,
},
{
text: 'Is this the second question?',
answer: null,
},
{
text: 'Is this the third question?',
answer: null,
},
],
}
},
methods: {
setAnswer({
id,
answer
}) {
this.questions[id].answer = answer
},
},
template: `
<div>
<div>
QUESTIONS STATE: {{ questions }}
</div>
<hr />
<router-view
:questions="questions"
#set-answer="(data) => setAnswer(data)"
></router-view>
</div>
`
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app"></div>
You can see that
the whole quiz state is tracked in one place: the question components do nothing but display the question and emit the answer back to the parent to update the state;
the questions are passed down from the parent; the route param (:qidx) is used to choose which question to display;
when the last question is reached, the next step is automatically the result page; but, because ALL the pages in the router-view receive the state of the questions, it's easy to calculate a result based on any calculation rule you might need.
I hope this helps you in a "smooth quiz-flow" :)

Answer 2

What I ended up doing is pushing to the router directly like this:
In the button:
v-on:click="toResults()"
And in methods:
toResults() {
this.$router.push({
name: "resultsRoute",
params: {
items: this.answers,
}
I was then able to get the items on the other side like this:
vm.$route.params.items