Самый простой способ сделать роутинг в NativeScript-Vue - это использовать удобные функции $navigateTo
, $navigateBack
, и $showModal
.
$navigateTo
Предположим, что у вас есть компоненты Master
иDetail
, и вы хотите перейти от Master
к Detail
. В этом случае у вас есть два способа вызова $navigateTo
: в представлении или в методе:
$navigateTo
принимает второй параметр options
, который позволяет вам указать переход, а также передать объект context
, который будет использоваться при создании экземпляра целевого компонента. Это полезно, если вы хотите передать свойства целевому компоненту. Например:
this.$navigateTo(Detail, {
transition: {},
transitionIOS: {},
transitionAndroid: {},
context: {
propsData: {
foo: 'bar',
}
}
});
Для получения более подробной информации вы можете перейти к документации по NavigationEntry.
Выделите компонент Detail
через свойство data
в компоненте Master
и вызовите $navigateTo (<propertyName>)
в представлении напрямую.
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()
Cвяжите кнопку с методом и используйте 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
. Как и раньше, этот метод можно вызвать либо из представления, либо из функции.
Чтобы закрыть модальное предствление, вызовите $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>
`
};
Свойства могут быть переданы в модальное представление с помощью propsData
внутри объекта context
, переданного как опция при вызове $showModal
.
Если нам необходимо передать свйоство id
в компонент Detail
из предыдущего прмиера с Master/Detail
, мы могли бы отобразить модальное представление, используя:
this.$showModal(Detail, { context: { propsData: { id: 14 }}});
Компонент Detail
также должен быть обновлен, чтобы иметь воможность использовать свойство id
. Это делается путем определения параметра props
внутри компонента:
const Detail = {
props: ['id'],
template: `
<Page>
<ActionBar title="Detail"/>
<StackLayout>
<Label :text="id" />
<Button @tap="$modal.close" text="Close" />
</StackLayout>
</Page>
`,
};
Подробнее о параметрах читайте в официальной документации Vue
Теперь свйоство доступно всему компоненту с помощью this.id
.
При вызове $showModal
возвращается promise, который разрешается(resolve) с любыми данными, переданными функции $modal.close
.
Например:
// ... внутри Master
this.$showModal(Detail).then(data => console.log(data)); // Будет выведено 'Foo'
// ... внутри Detail
<Button @tap="$modal.close('Foo')" text="Close" />