A maneira mais fácil de fazer roteamento no NativeScript-Vue, é usando as funções $navigateTo, $navigateBack e $showModal.
$navigateToSuponha que você tenha componentes Master e Detail e queira navegar de Master para Detail, você tem duas maneiras de chamar $navigateTo: na view ou em um método.
Exponha o componente Detail através da propriedade data no componente Master e chame $navigateTo(<nomeDaPropriedade>) diretamente na view.
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()Vincule um botão em um método e use this.$navigateTo(Detail) para navegar para o componente 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>
`
};$navigateBackAdicione um botão no componente Detail que simplesmente aciona a função global $navigateBack.
const Detail = {
template: `
<Page>
<ActionBar title="Detail"/>
<StackLayout>
<Button text="Back to Master" @tap="$navigateBack" />
</StackLayout>
</Page>
`
};$showModalSe você quer mostrar a página Detail em um modal, troque $navigateTo por $showModal. Como antes, você pode chamar esse método na view ou em uma função.
Para fechar o modal, chame $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>
`
};