퓨즈[Fusetools] 문서[Docs] 번역

  1. Home
  2. 퓨즈[Fusetools] 문서[Docs] 번역
  3. 네비게이션
  4. 라우터[Router]

라우터[Router]

Router 클래스

퓨즈 앱의 일부 또는 전체에 대한 라우팅 및 내비게이션 기록을 관리합니다.

참고: 퓨즈의 네비게이션 시스템 전체를 보려면 먼저 네비게이션 가이드를 읽는 것이 좋습니다.

Router 클래스는 Navigator 및 PageControl과 같은 라우터 아울렛(router outlets)과 함께 퓨즈에서 탐색의 기초를 형성합니다. 퓨즈 앱을 탐색하려면 경로가 라우터 인스턴스로 전송됩니다. 이 경로는 탐색할 대상을 식별하는 문자열 경로와 탐색할 때 이 대상에 보낼 데이터(선택 사항)로 구성되는 하나 이상의 부분으로 구성됩니다.

라우터는 경로를 수신하면 경로의 다른 부분에 대한 탐색을 반복적으로 수행합니다. 각 부분에 대해, 이 부분의 문자열 경로를 사용하여 앱의 일부를 탐색하는 라우터 콘센트를 찾기 위해 즉각적인 UX 트리를 검색합니다. 예를 들어, 네비게이터에서 템플릿의 템플리트 키나 PageControl의 페이지 이름을 나타낼 수 있습니다.

라우터는 goto가 있는 경로간에 직접 이동하거나 push 및 goBack을 사용하여 계층적으로 탐색할 수 있습니다.

일반적으로 앱은 App 루트에서 작동하는 단일 글로벌 라우터 인스턴스를 사용하며 전체 앱에 대한 단일 탐색 컨텍스트를 나타냅니다. 그러나 UX 트리의 다른 로컬화된 부분에 대해 별도의 라우터를 만드는 것이 가능합니다. 예를 들어 앱의 일부로 다른 히스토리를 보관해야 하는 경우 유용할 수 있습니다.

예제

다음 예제는 라우터 및 네비게이터를 사용하는 기본 탐색 설정을 보여줍니다. 퓨즈의 네비게이션 시스템에 대한 전체 소개 및 적절한 예를 보려면 네비게이션 가이드를 참조하십시오.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<JavaScript>
    module.exports = {
        gotoFirst: function() { router.goto("firstPage"); },
        gotoSecond: function() { router.goto("secondPage"); }
    };
</JavaScript>

<Router ux:Name="router" />

<DockPanel>
    <Navigator DefaultTemplate="firstPage">
        <Page ux:Template="firstPage">
            <Text Alignment="Center">This is the first page.</Text>
        </Page>
        <Page ux:Template="secondPage">
            <Text Alignment="Center">This is the second page.</Text>
        </Page>
    </Navigator>

    <Grid Dock="Bottom" Columns="1*,1*">
        <Button Text="First page" Padding="20" Clicked="{gotoFirst}" />
        <Button Text="Second page" Padding="20" Clicked="{gotoSecond}" />
    </Grid>
</DockPanel>

페이지 네비게이션 정렬

라우터의 히스토리(history)은 표준 히스토리 순서를 따르고, 최신 경로는 히스토리의 앞쪽에 있고 오래된 경로는 뒤쪽에 있습니다.

그러나 라우터는 네비게이션 정렬에 설명된 대로 개별 컨트롤에서 페이지의 탐색 순서를 결정하지 않습니다. 이것은 사용되는 각 콘센트에 의해 제어됩니다.

Router의 인터페이스

링크로 대신합니다: https://www.fusetools.com/docs/fuse/navigation/router#section-table-of-contents

Was this article helpful to you? Yes No

How can we help?