Nativescript vue navigateTo 外部选项卡答案

【问题标题】：Nativescript vue navigateTo outside tabNativescript vue navigateTo 外部选项卡
【发布时间】：2020-07-21 21:55:33
【问题描述】：

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

在应用加载时，它会打开登录。当用户登录时，他被重定向到 App.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!");
                    });

            },

【问题讨论】：

在$navigateTo方法的选项参数中传递根框架id - nativescript-vue.org/en/docs/elements/components/frame/…
@Manoj 但我没有根框架。我的根是 Login.vue，我只有 Page
您的主或应用 js 文件中必须有一个 Frame。您无法加载没有框架的页面。所以登录页面上面应该有一个框架，您必须为该框架分配一个 id 并在其上导航。如果您仍有问题，请分享一个 Playground 示例，以便重现该问题。
谢谢它终于工作了。我不知道如何在 app.js 中将 ID 设置为第一帧...
@general666 请发布您是如何解决这个问题的。我遇到了sae问题。谢谢

标签： vue.js redirect nativescript logout

【解决方案1】：

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

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

【讨论】：

感谢您的快速回复。我将整个嵌套在我的 App.vue <Page> 中的 <Frame id='main'> 中，它正在工作，但在 $navigateBack({frame: 'main-app' }) 上，页面无法滚动并且图像不显示（从 Login.vue 导航回 App.vue） .你在哪里设置主框架，也许这会有所帮助。
当您导航“到”和“从”页面时，您必须在框架内导航。因此，如果您的 frame id 设置为 main，请确保为 frame 选项传递值。