How to create a route based BottomNavigation component? - nativescript

Question

BottomNavigation component requires to put all tab contents on same page.
e.g:
<TabContentItem>
<GridLayout>
<Label text="Home Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Account Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
<TabContentItem>
<GridLayout>
<Label text="Search Page" class="h2 text-center"></Label>
</GridLayout>
</TabContentItem>
I think pages are loaded like a dynamic component. I want to have tabs only with route links. When user tap a tab, I will redirect user to another page.
If I don't use TabContentItem, TabStripItems are also not shown on page. So, I added them with empty contents.
Using selectedIndexChange event I can redirect user to another page, but when one of the tab links is current page, it goes to infinite loop.
It seems like tabs has to be on a different page on this setup. This is not something I want.
Is there a way to convert the BottomNavigation component to a route based one?
Here my current code is:
(It is a Vue project.)
<template>
<BottomNavigation selectedIndex="0" #selectedIndexChange="indexChange">
<TabStrip #itemTap="test">
<template v-for="(tab, key) in tabs">
<TabStripItem :key="key">
<Label :text="tab.title"></Label>
</TabStripItem>
</template>
</TabStrip>
<template v-for="(tab, key) in tabs">
<TabContentItem :key="key">
<GridLayout>
</GridLayout>
</TabContentItem>
</template>
</BottomNavigation>
</template>
<script>
export default {
props: {
tabs: {
type: Array,
required: true
}
},
created () {
},
methods: {
indexChange: function (args) {
let newIndex = args.value
let route = this.tabs[newIndex].route
this.goToPage(route)
},
goToPage (route) {
this.$navigator.navigate(route)
}
}
}
</script>