2 Navigators in BottomNavigation has unexpected behaviour

[darylteo]

<template>
    <Page>
        <BottomNavigation @selectedIndexChanged="onBottomNavigationIndexChanged">
            <TabStrip>
                <TabStripItem class="navigation__item" @tap="() => onTabTap(0)">
                    <Label text="News"></Label>
                    <Image src.decode="font://&#xf015;" class="fas t-36"></Image>
                </TabStripItem>
                <TabStripItem class="navigation__item">
                    <Label text="Settings"></Label>
                    <Image src.decode="font://&#xf013;" class="fas t-36"></Image>
                </TabStripItem>
            </TabStrip>

            <TabContentItem>
                <Frame id="frame-1" ref="frame-1">
                    <Page>
                        <Navigator defaultRoute="/feed"/>
                    </Page>
                </Frame>
            </TabContentItem>

            <TabContentItem>
                <Frame id="frame-2" ref="frame-2">
                    <Page>
                        <Navigator defaultRoute="/settings"/>
                    </Page>
                </Frame>
            </TabContentItem>
        </BottomNavigation>
    </Page>

/feed route

                this.$navigator.navigate('/article', {
                    props: {
                        articleId: id,
                    },
                    frame: 'frame-1', // without this, it navigates in frame-2
                });

I expected it to know which frame it was held within and navigate accordingly.

Not the end of the world, just means I have to manually specify the frame, which may not be ideal, as there might be several paths to the same page in each tab.

[rigor789]

Navigator itself is a Frame - there is no need for the frames and pages inside the tab contents. Your issues are likely related to navigating on the wrong frames. And if you have multiple of them, you have to give them an id, and pass that id to navigation options - as otherwise there's no easy way to predict which frame to navigate.

[github-actions[bot]]

:tada: This issue has been resolved in version 1.0.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: