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. 建立一個新的命名路線稱爲細節：

   { 
        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. 內，您的組件的詳細信息，您必須聲明航線PARAMS作爲道具，例如props: ["id"],。然後您可以使用this.id在您的組件中訪問它。