루트 메타데이터 키가 true로 설정된 경우 특정 경로에서 구성 요소를 모달로 렌더링합니다.

루트 메타데이터 키가 true로 설정된 경우 특정 경로에서 구성 요소를 모달로 렌더링합니다.

vue-router를 사용하고 있으며 다음과 같은 기능을 생성하려고 합니다.

라우터 루트로 컴포넌트를 모달로 렌더링할지를 지정할 수 있도록 하고 싶습니다.모달로 렌더링된 경우 아래의 모든 컴포넌트(modal-mask 아래)를 참조해 주세요.기본적인 모달 구조를 가진 모달 래퍼 컴포넌트를 만들었습니다.slot렌더링할 컴포넌트가 그 모달바디 안에 들어가도록 합니다.slot하지만 그걸 어떻게 달성할 수 있을까.한다Vue-Router그 기능을 선택할 수 있습니다.

라우터 루트:

{
  path: '/customers/:clientId',
  component: customerView
  meta: {
    auth: true,
  },
},
{
  path: '/customers/:clientId/addAddress',
  component: dataViewAdd
  meta: {
    openInModal: true,
    auth: true,
  },
},

이전 라우터 뷰를 오버레이 할 때 컴포넌트를 모달 내에 렌더링할 필요가 있기 때문에 라우터 뷰를 2개 필요로 합니다.

<router-view class="normal-view"></router-view>
<router-view class="modal-view" name="modal-view"></router-view>

각 모달 루트에 표시되는 컴포넌트가 비모달콘텍스트에서 사용되지 않은 경우 모달루트 컴포넌트의 템플릿을 변경할 수 있습니다( ).dataViewAdd모달 컴포넌트가 템플릿의 루트가 되도록 합니다.단, 이러한 컴포넌트를 다른 상황에서 재사용할 수 있다고 말씀하셨습니다(따라서 1개의 컴포넌트가dataViewAdd모달 내부 및 다른 루트가 사용할 수 있습니다.dataViewAdd모달 내부가 아닙니다).

각 컴포넌트의 래퍼 모달버전을 작성할 수 있지만, 이 경우 복잡해집니다.openInModal: true모든 컴포넌트에 사용할 수 있습니다.

또, DOM 에서의 모달의 위치는 중요하지 않다고 말씀하셨습니다(그렇지 않으면, 이것과 같은 것을 사용하는 것을 추천합니다).

먼저 모드 루트가 그 아래에 표시되도록 라우터 설정을 변경해야 합니다.확인하다customerView가 있다<router-view>그 안에.

컴포넌트의 모달랩된 버전을 반환하는 도우미 함수를 생성하여 루트컴포넌트로 사용합니다.이 방법에서는openInModal메타 속성이지만 비슷한 방식으로 작동합니다.

다음 코드는 테스트되지 않았습니다.

import Modal from './modal.vue';

function wrapInsideModal(childComponent) {
  return {
    functional: true,
    render(h) {
      return h(Modal, [h(childComponent)]);
    },
  };
}

// Routes
{
  path: '/customers/:clientId',
  component: customerView,
  meta: {
    auth: true,
  },
  children: [
    {
      path: 'addAddress',
      component: wrapInsideModal(dataViewAdd),
    },
  ],
},

언급URL : https://stackoverflow.com/questions/45075898/vue-render-component-as-modal-in-specific-route-if-route-metadata-key-is-set-to