NativeScript-Vue 에서 라우팅을 하는 가장 쉬운 방법은 $navigateTo
, $navigateBack
, $showModal
과 같은 편리한 함수를 사용하는 것입니다.
$navigateTo
Master
와 Detail
이라는 컴포넌트들이 있다고 가정하고, Master
에서 Detail
로 이동하기를 원할때 $navigateTo
를 호출하기 위한 두가지 방법이 있습니다: 뷰(view)에서 혹은 메소드에서:
Master
컴포넌트의 data
프로퍼티를 통해 Detail
컴포넌트를 노출시키고 view 에서 바로 $navigateTo(<프로퍼티 이름>)
을 호출합니다.
const Vue = require('nativescript-vue');
const Master = {
template: `
<Page>
<ActionBar title="Master" />
<StackLayout>
<Button text="To Details directly" @tap="$navigateTo(detailPage)" />
</StackLayout>
</Page>
`,
data() {
return {
detailPage: Detail
}
}
};
const Detail = {
template: `
<Page>
<ActionBar title="Detail"/>
<StackLayout>
<Label text="Details.." />
</StackLayout>
</Page>
`
};
new Vue({
render: h => h(Master)
}).$start()
버튼을 메소드에 연결하고 이 메소드에서 this.$navigateTo(Detail)
을 사용하여 Detail
컴포넌트로 이동합니다.
const Master = {
template: `
<Page>
<ActionBar title="Master" />
<StackLayout>
<Button text="To Details via method" @tap="goToDetailPage" />
</StackLayout>
</Page>
`,
methods: {
goToDetailPage() {
this.$navigateTo(Detail);
}
}
};
const Detail = {
template: `
<Page>
<ActionBar title="Detail"/>
<StackLayout>
<Label text="Details.." />
</StackLayout>
</Page>
`
};
$navigateBack
Detail
에 전역적으로 노출된 $navigateBack
함수를 호출하는 버튼을 추가합니다.
const Detail = {
template: `
<Page>
<ActionBar title="Detail"/>
<StackLayout>
<Button text="Back to Master" @tap="$navigateBack" />
</StackLayout>
</Page>
`
};
$showModal
Detail
페이지를 모달 페이지로 보여주고 싶다면, 간단히 $navigateTo
를 $showModal
로 바꾸면 됩니다. 앞에서 처럼 이 메소드는 view 나 함수에서 호출
모달을 닫으려면 $modal.close
을 호출하면 됩니다.
const Master = {
template: `
<Page>
<ActionBar title="Master" />
<StackLayout>
<Button text="Show Details modally" @tap="showDetailPageModally" />
</StackLayout>
</Page>
`,
methods: {
showDetailPageModally() {
this.$showModal(Detail);
}
}
};
const Detail = {
template: `
<Page>
<ActionBar title="Detail"/>
<StackLayout>
<Button @tap="$modal.close" text="Close" />
</StackLayout>
</Page>
`
};