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

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

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

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