iflex docs

Appearance

Vue ​

상세 모달 바로 가기 ​

해당 도메인의 id 를 받을 수 있도록, routes.js 를 수정합니다.

routes.js 수정 ​

frontend/src/router/routes.js

javascript
{
  path: 'info',
  // 생략
}

기존 위처럼 되어있는 부분에, 동적 라우트 매칭을 위해 다음과 같이 동적 세그먼트를 추가합니다:

javascript
{
  path: 'info/:id?',
  // 생략
}

TIP

동적 세그먼트 :id? 의 ? 는 필수항목이 아님을 의미합니다.

list vue 수정 ​

list 를 담당하는 vue 의 mounted method 에서 mixin 에 구현되어있는 onSegment 를 이용해 상세 모달을 띄우도록 합니다.

전달되어지는 id 는 동적 세그먼트에 전달되어진 값입니다.

javascript
mounted() {
    // 생략

    this.onSegment((id) => {
        const model = {id}; // {id} == {id: id}
        this.viewProduct(model);
    });
}

TIP

onSegment 내에는 url 를 rewrite 하는 기능이 포함되어있습니다. 만약 /user/21 로 접근한 경우, onSegment 처리를 완료 한 후, 브라우져상의 url 을 목록 url 인 /user 로 변경시켜 줍니다. 이 기능이 필요하지 않다면, onSegment 를 통하지 않고, this.$route.params.id 로 직접 동적 세그먼트 받아서 처리 할 수도 있습니다.