서브 라우팅 모드
ofa.js에서는 서브 라우팅을 몇 가지 프론트엔드 프레임워크와 다르게 설정합니다. ofa.js는 더 직관적인 방식을 사용하여 페이지 모듈에 부모 페이지를 설정하여 컨테이너로 사용하여 서브 라우팅 요구 사항을 충족시킵니다.
부모 페이지 컨테이너 설정
자식 라우트를 만들려면 먼저 자식 페이지의 페이지 모듈에서 parent 매개변수를 설정하여 부모 페이지의 페이지 모듈 주소를 지정해야 합니다. 이렇게 하면 자식 페이지가 로드될 때 ofa.js가 자동으로 자식 페이지를 부모 페이지 컨테이너로 감싸게 됩니다.
<template page>
<h1>Page 1</h1>
<script>
export const parent = "./layout-page.html";
</script>
</template>
위의 예시에서, 하위 페이지의 페이지 모듈은 parent 매개변수를 통해 부모 페이지 컨테이너의 주소를 지정합니다.
부모 페이지 컨테이너 템플릿 설정
적당한 위치에 자식 페이지를 삽입 할 수 있도록 하는 <slot> 요소가 부모 페이지 컨테이너 템플릿에 설정되어야합니다. 동시에 <slot> 요소의 컨테이너 요소가 position: relative로 설정되도록하여 부모 페이지 컨테이너에서 자식 페이지가 절대 위치로 나타날 수 있도록해야합니다.
아래는 부모 페이지 컨테이너의 예제 템플릿입니다.
<!-- layout-page.html -->
<template page>
<style>
/* 컨테이너 요소를 상대 위치로 설정합니다. */
.parent-container {
position: relative;
}
</style>
<!-- 서브 페이지를 삽입할 컨테이너 요소를 설정합니다. -->
<div class="parent-container">
<slot></slot>
</div>
</template>
위의 예에서 slot을 가진 컨테이너 요소를 설정하여 하위 페이지를 해당 컨테이너에 삽입합니다. 컨테이너 요소가 상대적 위치를 가지도록 하여 하위 페이지가 컨테이너 위치를 기준으로 정렬될 수 있도록 합니다.
이러한 방식을 사용하면 부모페이지 컨테이너와 자식페이지의 연결을 설정하여 자식페이지의 로딩과 렌더링을 구현할 수 있어서 더 직관적으로 서브 라우트를 구성할 수 있습니다.
부모 페이지의 라우트 리스너
대부분의 경우, 여러 페이지가 하나의 상위 페이지를 컨테이너로 공유하고, 이러한 페이지 간에 이동할 때 상위 페이지는 새로 고쳐지지 않습니다. 이 경우, 상위 페이지는 여전히 경로 변경을 감시하여 페이지를 새로 고치지 않고도 해당 조작을 수행할 수 있습니다.
라우터 변화 감지
부모 페이지 모듈은 routerChange 함수를 설정할 수 있으며, 이 함수는 라우터의 변경을 감지합니다. 페이지가 라우터 전환을 하고 부모 페이지를 새로 고치지 않을 때, routerChange 이벤트가 발생합니다. 이 이벤트는 현재 페이지의 정보와 이동하는 방식(type)을 전달합니다.
아래는 부모 페이지 모듈의 예제이며, routerChange 함수를 설정하여 경로 변화를 감지하는 방법을 보여줍니다.
// 부모 페이지의 페이지 모듈
export const routerChange = (current, type) => {
console.log(`라우터 전환: 현재 페이지는 ${current.src}이고 전환 방식은 ${type}입니다.`);
};
위의 예시에서 routerChange 함수는 두 개의 매개변수를 받습니다. current는 현재 페이지의 주소를 나타내고, type은 이동 방식을 나타냅니다. 페이지가 라우팅 변경될 때마다 이 함수가 트리거되며, 해당 정보를 출력합니다.