Nativescript vue navigateTo outside tab

Question

I'm new to Nativescript Vue. I have Login page and then page with BottomNavigation tabs. When I try to logout from Profile Tab I'm not able to navigateTo login page. It opens login page inside the tab.

On app load it opens Login. When user login he is redirected to App.vue where are tabs. And I need to logout and redirect inside tab.

How can I open login page not inside tab?

Login.vue

<template>
    <Page>
        <FlexboxLayout class="page">
            <StackLayout class="form">
                <Image class="logo" src="~/assets/images/logo.png" />

                <StackLayout class="input-field" marginBottom="25">
                    <TextField class="input"
                               hint="E-mail"
                               keyboardType="email"
                               autocorrect="false"
                               autocapitalizationType="none"
                               v-model="user.email"
                               returnKeyType="next"
                               fontSize="18"
                    />
                    <StackLayout class="hr-light" />
                </StackLayout>

                <StackLayout class="input-field" marginBottom="25">
                    <TextField ref="password"
                               class="input"
                               hint="Password"
                               secure="true"
                               v-model="user.password"
                               :returnKeyType="'done'"
                               fontSize="18"
                    />
                    <StackLayout class="hr-light" />
                </StackLayout>

                <Button :text="'Log In'"
                        @tap="submit"
                        class="btn btn-primary m-t-20"
                />
                <Label text="Forgot your password?"
                       class="login-label"
                       @tap="forgotPassword"
                />
            </StackLayout>
        </FlexboxLayout>
    </Page>
</template>

App.vue

<template lang="html">
    <Page>
        <ActionBar>
            <NavigationButton visibility="collapsed"></NavigationButton>
            <StackLayout orientation="horizontal">
                <Image src="~/assets/images/test.png"></Image>
                <Label text="Telematics"></Label>
            </StackLayout>
        </ActionBar>

        <BottomNavigation>
            <TabStrip>
                <TabStripItem class="navigation__item">
                    <Label text="Tracking"></Label>
                    <Image src.decode="font://&#xf124;" 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="Profile"></Label>
                    <Image src.decode="font://&#xf007;" class="fas t-36"></Image>
                </TabStripItem>
            </TabStrip>

            <TabContentItem>
                <Frame>
                    <Items />
                </Frame>
            </TabContentItem>

            <TabContentItem>
                <Frame>
                    <Browse />
                </Frame>
            </TabContentItem>

            <TabContentItem>
                <Frame>
                    <Profile />
                </Frame>
            </TabContentItem>

        </BottomNavigation>
    </Page>
</template>

Profile.vue

<template lang="html">
    <Page actionBarHidden="true">
        <GridLayout class="page__content">
            <Label class="page__content-placeholder"
                   v-if="getEmail"
                   :text="getEmail"
            ></Label>
            <Label class="page__content-icon fas" text.decode="&#xf007;"></Label>
            <Button :text="'Log Out'"
                    @tap="logout"
                    class="btn btn-primary m-t-20"
            />
        </GridLayout>
    </Page>
</template>

Logout method

logout() {
                this.tryLogout()
                    .then(() => {
                        console.log('LOGING OUT...');
                        this.$navigateTo(Login, {
                            clearHistory: true
                        });
                    })
                    .catch(() => {
                        this.alert("An error occured!");
                    });

            },

Answer 1

Solution is to specify frame in navigateTo:

this.$navigateTo(Login, {
   frame: 'main',
   clearHistory: true
});