javascript - VueJS/Vue Router - 从列表项创建详细信息页面？

Question

我有一个当前循环遍历的项目列表(取自 JSON 文件)，但是我希望为每个项目创建一个详细信息页面(结合 VueRouter)。

关于如何实现这一目标的任何指示？我目前坚持将数据传递到详细信息页面模板。

谢谢

    <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

查看这些链接:

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

对于您的用例，您可以做的是:

1. 设置一个名为 details 的新命名路由:

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

   每次您想将用户重定向到详细信息页面时，请使用此路由。:projectId 表示它是动态的，您可以提供任何 id，它总是会重定向到您创建的组件 Details 以显示项目的详细信息。

2. 像这样在您的列表中创建一个新的路由器链接:

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

3. 在您的组件详细信息中，您必须将路由参数声明为 props，例如 props: ["id"],。然后，您可以使用 this.id 在您的组件中访问它。