NativeScript Vue Frame navigateTo 不导航

Question

我正在使用 NativeScript 和 Vue 创建一个应用程序。加载后，我想显示一个登录页面，或者如果用户之前已登录，则导航到其他地方。我的页面已加载但未导航至登录页面。这是运行在 IOS 模拟器中。

<template>
    <Page>
        <RadSideDrawer ref="drawer" showOverNavigation="true">
            <StackLayout ~drawerContent backgroundColor="#ffffff">
                <Label class="drawer-header" text="Drawer"/>

                <Label class="drawer-item" text="Static 1"/>
                <Label class="drawer-item" text="Static 2"/>
                <Label class="drawer-item" text="Static 3"/>
            </StackLayout>
            <Frame ~mainContent> 
                <Page> <!-- test to see if mainContent navigates -->
                    <TextField class="input" hint="Email" keyboardType="email" autocorrect="false" autocapitalizationType="none" v-model="user.email"
                     returnKeyType="next" fontSize="18" />
               </Page>
            </Frame>
        </RadSideDrawer>
    </Page>
</template>

<script>
import homePage from './HomePage'
import loginPage from './LoginPage'

export default {
    data() {
        return {
            isLoggingIn: true,
            user: {
                email: "foo@foo.com",
                password: "foo",
                confirmPassword: "foo"
            }
        };
    },
    mounted() {
        this.user.email = "test@example.com", <!-- Change email to check mounted is called.  It is! -->
        this.$navigateTo(loginPage, { frame: "mainContent" } )
    }
};
</script>

我无法弄清楚自己做错了什么，也无法从源头上解决。任何 help/suggestions 将不胜感激。

Answer 1

您尚未在 RadSideDrawer 中为您的 Frame 设置 ID。

为了让您的 this.$navigateTo 代码正常工作，框架声明应该是

...
<Frame id="mainContent" ~mainContent> 
...

编辑：

我已经更新了你的Playground sample。

Page只能是Frame的child。所以我不得不更新你的 LoginPage.vue 或 HomePage.vue 来保存 Page.
如果我没记错的话，RadSideDrawer 会在内部覆盖 mainContent 的引用（虽然不确定），所以 id 在这里工作得更好。
组件挂载后，并不代表里面的所有组件都挂载了。所以我不得不添加一个超时。我不确定为什么你真的想在页面加载后立即导航，而不是你可以将登录/主页组件嵌入框架中作为默认页面。

NativeScript Vue Frame navigateTo 不导航

NativeScript Vue Frame navigateTo not navigating

nativescript

nativescript-vue