VueJS / Vue Router - create details page from list item?

Question

I have a list of items (taken from a JSON file) which I currently loop through, however I wish to create a details page for each of these items (incorporating VueRouter).

Any pointers on how to achieve this? I'm currently stuck on passing the data to the details page template.

Thanks

    <ul>
    <li v-for="projects in projects.projects">
    {{ projects.name }}
    <router-link :to="profileLink" class="button is-outlined">View Details</router-link>
    {{ projects.coding }}
    { projects.design }}
    {{ projects.description }}
    </li>
    </ul>

Answer 1

See those links :

• https://router.vuejs.org/en/essentials/dynamic-matching.html
• https://router.vuejs.org/en/essentials/named-routes.html

With your use case what you could do is:

1. set up a new named route called details:

       {
         path: '/project/:projectId/details',
         name: 'details',
         component: Details,
         props: true,
       }
   

   Every time you want to redirect a user to details page, use this route. The :projectId means it's dynamic, you can provide any id, it will always redirect to the component Details you created to display a project's details.

2. Create a new router link in your list like so:

   <router-link :to="{ name: 'details', params: { projectId: project.id }}">{{project.name}}</router-link>
   

3. Inside your component details, you have to declare route params as props, for instance props: ["id"],. You can then access it in your component with this.id.