如何在不点击导航栏的情况下使用BottomNavigation导航

Question

如果您使用的是NativeScript Vue标签导航，我对导航存在疑问。我正在使用由Nativescript团队提供的NativeScript Vue选项卡导航模板（https://market.nativescript.org/plugins/tns-template-tab-navigation-vue），并尝试使用Browse组件中的一个简单按钮从Browse组件导航到Items组件。因此，我希望能够导航到另一个组件，而无需单击模板中提供的选项卡之一。有人能指出我正确的方向吗？干杯！

App.vue:
<template lang="html">
    <BottomNavigation>
        <TabStrip>
            <TabStripItem class="navigation__item">
                <Label text="Home"></Label>
                <Image src.decode="font://&#xf015;" class="fas t-36"></Image>
            </TabStripItem>
            <TabStripItem class="navigation__item">
                <Label text="Browse"></Label>
                <Image src.decode="font://&#xf1ea;" class="far t-36"></Image>
            </TabStripItem>
            <TabStripItem class="navigation__item">
                <Label text="History"></Label>
                <Image src.decode="font://&#xf002;" class="fas t-36"></Image>
            </TabStripItem>
        </TabStrip>
        <TabContentItem>
            <Frame id="items">
                <Items/>
            </Frame>
        </TabContentItem>
        <TabContentItem>
            <Frame id="browse">
                <Browse/>
            </Frame>
        </TabContentItem>
        <TabContentItem>
            <Frame id="search">
                <History/>
            </Frame>
        </TabContentItem>
    </BottomNavigation>
</template>
<script>
    import Items from "./Items.vue";
    import Browse from "./Browse.vue";
    import History from "./History.vue";
    export default {
        components: {
            Items,
            Browse,
            History
        }
    };
</script>
<style lang="scss">
    // Start custom common variables
    @import "~@nativescript/theme/scss/variables/blue";
    // End custom common variables
    // Custom styles
</style>

Browse component:
<template lang="html">
    <Page>
        <ActionBar>
            <Label text="Browse"></Label>
        </ActionBar>
        <GridLayout class="page__content">
            <Label class="page__content-icon far" text.decode="&#xf1ea;"></Label>
            <Button @tap="navigate" >navigate to Items</Button>
            <Label class="page__content-placeholder" :text="message"></Label>
        </GridLayout>
    </Page>
</template>
<script>
    import Items from "./Items";
  export default {
      components: {
          Items
      },
    data() {
      return {
        message: "<!-- Browse page content goes here -->"
      };
    },
      methods: {
          navigate() {
              this.$navigateTo(Items);
          }
      }
  }
</script>
<style lang="scss" scoped>
    // Start custom common variables
    @import "~@nativescript/theme/scss/variables/blue";
    // End custom common variables
    // Custom styles
</style>

Answer 1

您应该能够使用selectedIndex的BottomNavigation属性来设置单击按钮时应该选择哪个选项卡。

<BottomNavigation :selectedIndex="selectedIndex">