Nativescript Vue this.$navigateTo 什么都不做

Question

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

今天再次编辑：好的，这实际上是导致 this.$navigateTo 停止工作的原因...如果我导入一个服务以对 Friends.vue 中的休息 api 进行 http 调用要在mounted() 事件中获取数据，这会导致this.$navigateTo 从调用Home.vue 停止工作。谁能提出原因？

这是在 Friends.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>

编辑：添加 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();

Answer 1

似乎 Nativescript 会在某些代码错误时静默失败。我已经搜索了构建输出，它没有捕捉到丢失的module.exports。似乎构建过程应该抓住这一点。正确的？您看到此问题的唯一方法是 this.$navigateTo 如果您在目标页面加载和调用模块时遇到此代码错误，则会静默失败。超级奇怪。

请参阅以下 NS Playground。查看 http-service.js。请注意，module.exports 缺少 getAllFriends 导出。这是看不见的问题。更正module.exports，一切正常。

https://play.nativescript.org/?template=play-vue&id=NnHdbs&v=8

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

Answer 2

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

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