VueJS / Vue路由器 - 从列表项创建详细信息页面？

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，它将始终重定向到您创建的组件详细信息以显示项目的详细信息。

2. 在列表中创建一个新的路由器链接，如下所示：

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

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