NATIVEScript vue navigateTo外部选项卡

Question

我是Nativescript Vue的新手。我有一个登录页面，然后有BottomNavigation标签的页面。当我试图从Profile标签页注销时，我无法导航到登录页面。它在标签页中打开登录页面。

在应用程序加载时，它打开登录。当用户登录时，他被重定向到App.vue，那里有标签。而我需要注销并重定向到标签页内。

我如何才能不在标签页内打开登录页面？

登录.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() {
                this.tryLogout()
                    .then(() => {
                        console.log('LOGING OUT...');
                        this.$navigateTo(Login, {
                            clearHistory: true
                        });
                    })
                    .catch(() => {
                        this.alert("An error occured!");
                    });

            },

Answer 1

解决方法是在navigateTo中指定框架。

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