Communication between components with Vue and routes

Question

I'm just starting with vue but I'm stuck here: I want to pass info from a component to another one. I'm using routes.

If you click on teacher > student list > check (the first one) you render a component (student grade). There, I want to output data from the array students which is stored in student list.

How can I do that?

This is my work: https://codesandbox.io/s/61xk8xjy63

Answer 1

I recommend use params in vue-router.

Sample: https://codesandbox.io/s/zrk6r0o4ml.

In sample used named path (docs: https://router.vuejs.org/essentials/named-routes.html) and params path (docs: https://router.vuejs.org/essentials/passing-props.html).

Also, i use v-for for display array of data (file StudentList.vue, docs: https://v2.vuejs.org/v2/guide/list.html#Mapping-an-Array-to-Elements-with-v-for).

Good luck.