개요

여기서 아이디어는 특히 모달 대화 상자용으로 Ionic VueJS Application에서 탐색 스택을 만드는 방법을 보여주는 것입니다. 모달 대화 상자는 여전히 페이지에서 작동하며 탐색 스택에 푸시 및 팝되며 변경 사항은 전체 애플리케이션 탐색에 영향을 미치지 않습니다.

Source code available at the end of the blog post, I have edited out imports to keep the code concise

사용된 이온 문서

이온모달 - https://ionicframework.com/docs/api/modal

IonNav - https://ionicframework.com/docs/api/nav
> IonNav - 임의의 구성 요소를 로드하고 새 구성 요소를 스택에 푸시하기 위한 독립형 구성 요소입니다.

홈 구성 요소

응용 프로그램의 최상위 컨테이너인 이 구성 요소의 주요 목표는 작업을 시작하기 위해 모달을 여는 것입니다. 프로젝트를 시작하기 위해 @ionic-cli에서 생성된 빈 템플릿을 비웠습니다.

모달 숨기기 및 표시를 렌더링하고 관리하는 코드는 위에 링크된 Ionic 문서에서 직접 가져온 것입니다. 모달이 표시되는지 여부를 결정하는 구성 요소에 반응 변수 isOpenRef 를 만듭니다.

홈뷰

<ion-content :fullscreen="true" class="ion-padding">
  <ion-button @click="setOpen(true)">Show Modal With Nav</ion-button>
  <ion-modal
    :is-open="isOpenRef"
    @onDidDismiss="setOpen(false)"
  >
    <base-modal :rootPage="ModalHome"></base-modal>
  </ion-modal>
</ion-content>

아래는 모달을 여는 자바스크립트 코드이며 템플릿에서 사용할 rootPage 구성 요소(ModalHome )를 가져오는 것을 알 수 있습니다.

구성 요소를 가져와야 하지만 파일의 구성 요소 섹션에 추가할 필요는 없지만 setup가 값에 액세스할 수 있도록 template 함수에서 반환해야 합니다.

import { ... } from "@ionic/vue";
import { defineComponent, ref } from "vue";
import BaseModal from "./BaseModal.vue";

// root page component defined here
import ModalHome from "./ModalHome.vue";


export default defineComponent({
  name: "Home",
  setup() {
    const isOpenRef = ref(false);
    const setOpen = (state: boolean) => (isOpenRef.value = state);
    return { isOpenRef, setOpen,  ModalHome };
  },
  components: { ... }
});

BaseModal 구성 요소

애플리케이션 내의 모달 탐색 스택용 컨테이너
BaseModal는 모달에서 수행할 모든 탐색의 컨테이너입니다. BaseModal는 Home 구성 요소에서 렌더링됩니다.
rootPage는 모달이 표시될 때 할당되고 ion-nav는 모달 내부의 다른 문서에서 이동할 때 페이지와 탐색을 렌더링하는 데 사용됩니다.

적절한 API 호출을 만들기 위해 구성 요소를 가져오기 위해 문서를 쿼리할 수 있도록 modal-nav id를 설정했음을 알 수 있습니다.

BaseModal.vue

<template>
  <div>
    <ion-nav :root="rootPage" id="modal-nav"></ion-nav>
  </div>
</template>

<script>
import { defineComponent } from "vue";
import { IonNav } from "@ionic/vue";
export default defineComponent({
  name: "BaseModal",
  components: {
    IonNav
  },
  props: ["rootPage"],
});
</script>

ModalHome 컴포넌트

모달 탐색 스택의 rootPage

ModalHome.vue

<ion-page>
  <ion-header :translucent="true">
    <ion-toolbar>
      <ion-buttons slot="end">
        <ion-button @click="closeModal">CLOSE</ion-button>
      </ion-buttons>
      <ion-title>MODAL HOME</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <h2>MODAL HOME</h2>
    <ion-button @click="nextPage">SHOW MODAL DETAIL</ion-button>
  </ion-content>
</ion-page>

document.getElementById를 호출하여 구성 요소가 마운트될 때 ion-nav를 가져옵니다. 푸시하려는 다음 페이지를 가져와야 합니다ModalHomeDetailVue.push 에서 ion-nav 메서드를 호출할 때 다음 구성 요소에 속성을 객체로 전달합니다.

I did investigate using provide/inject to get the ModalNav and save it with provide so that any component in the modal navigation stack can access it; but I wanted to keep this example as basic as possible and focused on ion-nav

모달을 완전히 닫고 기본 애플리케이션 탐색 스택으로 돌아갈 수 있도록 modalController에서 @ionic/vue를 가져옵니다.

import { defineComponent, ref, onMounted } from "vue";
import { ... } from "@ionic/vue";

// the detail page
import ModalHomeDetailVue from "./ModalHomeDetail.vue";

export default defineComponent({
  name: "ModalHome",
  components: { ... },
  setup() {
    // the nav ref
    const modalNav = ref(null);

    // get the the ion-nav element so we can make
    // api calls using ion-nav
    onMounted(() => {
      const v = document.getElementById("modal-nav");
      modalNav.value = v;
    });

    /**
     *  when going to the next page, I pass the nav as a property
     * so I don't need to get it from the document again
     */
    const nextPage = () => {
      modalNav.value.push(ModalHomeDetailVue, {
        // these come across as properties on the component
        modalNav: modalNav
      });
    };

    /**
     * close the modal dialog
     */
    const closeModal = async () => {
      await modalController.dismiss();
    };

    return {
      nextPage,
      closeModal
    };
  }
});

ModalHomeDetail 구성 요소

모달 탐색 스택에 푸시된 첫 번째 페이지입니다. 이 구성 요소에서는 ion-nav를 사용하여 페이지/구성 요소를 스택에 푸시할 때 뒤로 탐색을 처리하고 속성을 페이지/구성 요소에 전달하는 방법을 보여줍니다.

ModalHomeDetail.vue

<ion-page>
  <ion-header :translucent="true">
    <ion-toolbar>
      <ion-buttons slot="start">
        <ion-button @click="goBack">BACK</ion-button>
      </ion-buttons>
      <ion-title>MODAL HOME DETAIL</ion-title>
    </ion-toolbar>
  </ion-header>
  <ion-content class="ion-padding">
    <h2>MODAL HOME DETAIL</h2>
  </ion-content>
</ion-page>

내가 판단한 바에 따르면 우리는 뒷머리를 직접 처리해야 하므로 nav.pop() 를 호출하여 이를 처리하는 기능을 구성 요소에 추가했습니다. 구성 요소 속성으로 전달되었기 때문에 ion-nav를 얻습니다.

import { defineComponent } from "vue";
import { ... } from "@ionic/vue";
export default defineComponent({
  name: "ModalHomeDetail",
  components: { ... },
  props: [ "modalNav"],
  setup(props) {
    /**
     * get the nav from the props and go back
     */
    const goBack = () => {
      const nav = props.modalNav.value;
      nav.pop();
    };
    return {
      goBack
    };
  }
});

장치에서 테스트

나는 Mac을 가지고 있어서 내 작업의 대부분은 Mac을 기반으로 합니다. Android에서 문제가 발생하면 댓글을 남기거나 github 저장소에 문제를 게시하면 다시 연락드리겠습니다.

ionic build
ionic cap add android
ionic cap add ios
ionic cap run ios --livereload

소스 코드

전체 프로젝트 소스 코드는 다른 소스 코드와 함께 내 github 저장소에서 사용할 수 있습니다.
Ionic VueJS 및 ReactJS 콘텐츠. 보시고 댓글 남겨주세요. 또한 많은 프로젝트가 내 채널에서 생성한 것과 관련이 있습니다.

아론크사운더스 / ionic-vue-nav-in-modals

VueJS에서 ion-nav를 사용하여 Ionic Modals에서 탐색하는 방법

ionic-vue-nav-in-modals

블로그 게시물 - VueJS에서 ion-nav를 사용하여 Ionic Modals에서 탐색하는 방법

View on GitHub

💥 추가 콘텐츠

🎓 Udemy 과정 - https://www.udemy.com/user/aaronsaunders/

🎓 검로드 코스/컨텐츠 - https://www.gumroad.com/fiwic

💥 소셜 미디어

트위터 -

페이스북 - https://www.facebook.com/ClearlyInnovativeInc

인스타그램 -

데브토 -

🌐 www.fiwic.com