VueJS / Vue Router - 목록 항목에서 상세 페이지 생성?

VueJS / Vue Router - 목록 항목에서 상세 페이지 생성?

현재 루프하고 있는 항목(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>

다음 링크를 참조하십시오.

• 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 에서 컴포넌트로 액세스 할 수 있습니다.

언급URL : https://stackoverflow.com/questions/42904025/vuejs-vue-router-create-details-page-from-list-item