Nativescript vue navigateTo 外部选项卡

Question

我是 Nativescript Vue 的新手。我有登录页面，然后是带有 BottomNavigation 选项卡的页面。当我尝试从个人资料选项卡注销时，我无法导航到登录页面。它会在选项卡内打开登录页面。

加载应用程序时，它会打开登录。当用户登录时，他被重定向到 App.vue 选项卡所在的位置。我需要注销并在选项卡内重定向。

如何打开不在选项卡内的登录页面？

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

            },

Answer 1

解决方法是在navigateTo中指定frame:

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

Nativescript vue navigateTo 外部选项卡

Nativescript vue navigateTo outside tab

vue.js

redirect

nativescript

logout