Navigation Nativescript Vue此操作。$navigateTo不执行任何操作

编辑：请参阅下面我关于向Vue模板添加元素的评论

今天再次编辑：好的，下面是实际导致

this.$navigateTo

停止工作的原因…如果我导入一个服务，对Friends.vue中的rest api进行http调用，以获取mounted（）事件中的数据，这将导致

this.$navigateTo

从调用Home.vue停止工作。有人能提出原因吗

这是在朋友。vue

    mounted() {
    console.log(`${this.codeFile}: mounted() fired`);
    httpService.getAllFriends((data, err) => {
        this.friends = data;
        if (err) {
            console.error(
                `${this.codeFile}: mounted: getAllFriends: `,
                err
            );
        }
    });
},

我真的觉得我的代码看起来像文档，但是我的

this.$navigateTo（Friends）

什么都不做。我可以很好地看到

console.log

消息，但页面没有更改。我在文档中没有看到什么

<template>
    <Page class="page">
        <ActionBar class="action-bar" title="Home"></ActionBar>
        <ScrollView>
            <StackLayout backgroundColor="#3c495e">
                <Label
                    text="Friends"
                    @tap="gotoFriendsPage()"
                    height="70"
                    backgroundColor="#43b883"
                />
                <Label text="Places" height="70" backgroundColor="#289062"/>
                <Label text="Messages" height="70" backgroundColor="#1c6b48"/>
            </StackLayout>
        </ScrollView>
    </Page>
</template>

<script>
import Friends from "./Friends";

export default {
    data() {
        return {
            codeFile: "Home.vue",
            friendsPage: Friends
        };
    },
    created() {
        //console.log(`${this.codeFile}: created() fired`);
    },
    mounted() {
        //console.log(`${this.codeFile}: mounted() fired`);
    },
    computed: {},
    methods: {
        gotoFriendsPage: function() {
            console.log(`${this.codeFile}: gotoFriendsPage fired`);
            this.$navigateTo(Friends);
        }
    }
};
</script>

<style scoped lang="scss">
// Start custom common variables
@import "../_app-variables.scss";
// End custom common variables

// Custom styles
.action-bar {
    background-color: $blue-dark;
    color: $blue-light;
}
.body {
    color: gray;
}
.fa {
    color: $accent-dark;
    font-size: 16;
}
.col-text {
    text-align: left;
    margin-bottom: 3;
    padding: 5;
}
.col-title {
    text-align: left;
    margin-bottom: 0;
    padding: 5;
    padding-bottom: 0;
    font-weight: bold;
}
.info {
    font-size: 20;
}
</style>

从“/Friends”导入好友；
导出默认值{
数据（）{
返回{
代码文件：“Home.vue”，
朋友：朋友
};
},
创建（）{
//log（`${this.codeFile}:created（）已激发`）；
},
安装的（）{
//log（`${this.codeFile}:mounted（）已激发`）；
},
计算：{}，
方法：{
gotoFriendsPage:函数（）{
log（`${this.codeFile}:gotoFriendsPage已激发`）；
这是$navigateTo（朋友）；
}
}
};
//启动自定义公共变量
@导入“./_app-variables.scss”；
//结束自定义公共变量
//自定义样式
.动作条{
背景色：$蓝深；
颜色：$蓝光；
}
.身体{
颜色：灰色；
}
法兰西{
颜色：$深；
字号:16 ;；
}
.col文本{
文本对齐：左对齐；
边际下限：3；
填充：5；
}
上校头衔{
文本对齐：左对齐；
页边距底部：0；
填充：5；
填充底部：0；
字体大小：粗体；
}
.info{
字号:20 ;；
}

编辑：添加app.js

    import Vue from "nativescript-vue";
import Home from "./components/Home";

const template = `
    <Frame>
        <Home />
    </Frame>
`;

new Vue({
    template: template,
    components: {
        Home
    },
    mounted: function () {
        //console.log('app.js mounted fired...');
    },
    created: function () {
        //console.log('app.js created fired...');
    }
}).$start();

从“nativescript Vue”导入Vue；
从“/components/Home”导入主页；
常量模板=`
`;
新Vue({
模板：模板，
组成部分：{
家
},
挂载：函数（）{
//log（'app.js mounted fired…'）；
},
已创建：函数（）{
//log（'app.js created fired…'）；
}
}).$start（）；

您是如何实例化vue的？你是这样加框的吗

// Start
new Vue({
    store,
    render: h => h("frame", [h(store.getters.isLoggedIn ? routes.Home : routes.Login)])
}).$start();

---

Nativescript似乎会在出现某些代码错误时自动失败。我已经搜索了生成输出，但它没有捕获丢失的

模块。exports

。似乎构建过程应该抓住这一点。对吗？您看到此问题的唯一方式是

this。$navigateTo

将在加载和调用模块的目标页面上出现此代码错误时自动失败。太奇怪了

请参见下面的NS游乐场。查看http-service.js。请注意，

module.exports

缺少

getAllFriends

导出。这是一个无形的问题。更正

模块。导出

，一切正常

---

我希望这对以后的人有所帮助。

问题可能出在设备或编译中。我在这里看不到任何奇怪的东西。基于您的代码，我在这里创建了一个示例，当我在AndroidHmmm上使用游乐场应用程序进行检查时，它对我是有效的。您是对的，这在我的手机上运行得非常好。到目前为止，我只是在模拟器上测试，无法让它工作。今天晚些时候我会再处理这个问题。谢谢你，雅各布@雅各布：是的，该代码在本地有效。那么我做错了什么？这就是我在app.js中实例化Vue的方式吗？见下面的答复。我是根据演示/示例代码做的，这与您发布的示例略有不同。@jakob和任何后来发现这一点的人，jakobs的简单示例确实在操场和本地都有效。当向目标Friends.vue模板中添加更多元素时，OP中的问题，

this.$navigateTo

将不起任何作用。如果向目标添加其他StackLayout或GridLayout或ListView或任何内容（看起来），则this.$navigateTo将停止工作。为什么？你能在nativescript游戏中创建像你一样的例子吗？谢谢@Vince Lowe！我编辑了OP并添加了app.js。这就是我在上面发帖时的感受。目前，我正在修改它，看看是否可以让jakob提供的代码在本地工作。你看到我原来的app.js上面的问题了吗？@Vince_Lowe看到我关于向目标好友添加元素的评论。vue导致

这个。$navigateTo

停止工作。关于为什么会发生这种情况，你有什么建议吗？我被卡住了。谢谢！：-）