Vue.js Nativescript vue导航到外部选项卡

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

在应用程序加载时，它会打开登录。当用户登录时，他被重定向到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>

---

解决方案是在navigateTo中指定框架：

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

---

在

$navigateTo

方法-@Manoj的选项参数中传递根帧id，但我没有根帧。我的根是Login.vue，在那里我只有一个页面。您必须在主或应用程序js文件中有一个框架。您不能加载没有框架的页面。所以登录页面上方应该有一个框架，您必须为该框架分配一个id并在该框架上导航。如果你仍然有问题，请分享一个游乐场的例子，在那里问题可以被复制。谢谢你，它终于起作用了。我不知道如何在app.js中将ID设置为第一帧…@general666请发布您是如何解决这个问题的。我有sae问题。谢谢你的快速回复。我在App.vue

的

中嵌套了整个程序，但在

$navigateBack（{frame:'main App'}）

上，页面无法滚动，图像也不会显示（从Login.vue导航回App.vue）。你在哪里设置主框架，也许这会有帮助。当你导航到页面和从页面时，你必须在框架内导航。因此，如果您的帧id设置为

main

，请确保传递帧选项的值。

<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!");
                    });

            },

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