Is routing and data retrieval organized correctly?

Question

Vue.js

Hello colleagues. Interested in your professional opinion, comments on organizing routes and getting data in the example below.
There is a main page from where you will need to get to 2 others:

Case 1 -
transition to the Full-report page by clicking on the "View full report" link on the card:

Questions about the first case:
1. If the data is passed to the component that renders the Full page -report, organize it like this: in its date field we get id from the current route

data(){
    return {
        id: this.$route.params[id]
    }
}

And by this id we turn to the list of products from Vuex`a, we find the desired product with data for rendering Full-report. Is it okay to do so? Can I somehow pass this same data to the "View full report" link, by analogy with props in components? Then after all it will be possible to get rid of creation of dynamic routes!? You won't need to extract the id from the address bar.
2. Making the route a child or at the same level, which is better?
Case 2 -
transition to the Addnewmaterial page by clicking on the "Add new material +" link at the top of the main page:

Actually, the question is the same as in point 2 of the first case.
For the first time I face such task, your vision of the decision interests.

Answer 1

Routes support passing props very well. Read the documentation carefully