vue 라우팅: 올바른 라우팅/프로토콜이 있는 동일한 페이지의 목록-프로토콜 보기

vue 라우팅: 올바른 라우팅/프로토콜이 있는 동일한 페이지의 목록-프로토콜 보기

항목 목록과 항목 세부사항을 같은 페이지에 표시하려고 해.목록에서 항목을 클릭하면 해당 항목이 상세 보기에 표시되고 URL이 /items/item_id로 변경되어야 한다.

지금은 이렇게 하고 있지만, 물론 URL은 바뀌지 않는다.

<div>
    <items-table :items="items" @OnItemClicked="selectedItem=$event"></items-table>
</div>

<div v-if="selectedItem">
    <item-detail :item="selectedItem"></contact-card>
</div>

로 URL을 변경하려고 시도했다.router.push(...)목록의 항목을 클릭하지만, 이것은 전체 페이지를 다시 로드할 때중첩된 라우터 뷰도 찾아봤지만, 그게 올바른 방법인지, 어떻게 구현해야 하는지 잘 모르겠다.

vue.js에서 같은 페이지에 항목 목록과 항목 세부 정보를 표시하는 가장 좋은 방법은 무엇인가?

상세 뷰에 대해 해당 페이지에서 중첩 경로를 설정할 수 있다.

1. 라우터 구성에서children목록 보기 경로로 배열한다.하위 경로 구성에는 동적 경로 매개 변수(이전 경로로 미리 지정됨)가 있어야 한다.:라우트가 표시될 때 URL에 표시되는 항목 ID를 포함하려면:

   // router.js
   export default new VueRouter({
     routes: [
       {
         path: '/items',
         component: () => import('@/views/ListView.vue'),
         children: [
           {
             path: ':itemId',
             props: true,
             component: () => import('@/views/ListDetailView.vue')
           }
         ]
       }
     ]
   })
   

2. 목록 보기 구성 요소에서 를 추가하십시오.이것은 본체와 별개다.router-view루트 뷰(예:App.vue).

   <div class="list-view">
     <items-table :items="items"></items-table>
     <router-view></router-view>
   </div>
   

3. 에서items-table구성 요소, 각 항목에 대해 a를 추가하고, 1단계에서 상세 보기의 URL과 일치하는 경로(즉,/items/+ 항목 ID:

   <router-link :to="`/items/${item.id}`">{{ item.name }}</router-link>
   

데모를 하다

참조URL: https://stackoverflow.com/questions/66596856/vue-routing-list-detail-view-on-the-same-page-with-correct-routing-urls