如何使用打字稿使用手动路由nativescript-vue？

Question

我如何使用$ navigationTo在nativescript-vue中使用打字稿？我在这里做了这个工作：https://github.com/Figur8/NativescriptLoginTestVue，但是当我尝试使用打字稿时，出现此错误。[[Vue警告]：未知的自定义元素：-是否正确注册了组件？对于递归组件，请确保提供“名称”选项。

  <template>
        <Page>
            <FlexboxLayout class="page">
                <StackLayout class="form">
                    <Image
                            src="https://www.carnegietechnologies.com/sites/ct/assets/image/logo-octopus.png"
                            loadMode="async" stretch="aspectFit"></Image>

                    <StackLayout class="input-field">
                        <TextField v-model="email" hint="email" class="input" keyboardType="email"
                                   autocorrect="false" autocapitalizationType="none" >
                        </TextField>
                        <Label class="message" :text="email"/>
                    </StackLayout>

                    <StackLayout class="input-field">
                        <TextField hint="Password" secure="true" class="input">
                        </TextField>
                    </StackLayout>
                    <Button text="Log In" class="btn btn-primary" @tap="clientLogin" ></Button>
                    <Button text="Log In" class="btn btn-primary"
                            @tap="$goTo"></Button>
                </StackLayout>
            </FlexboxLayout>
        </Page>
    </template>

    <script lang="ts">

        import Vue from 'nativescript-vue';
        import {Component} from 'vue-property-decorator';
        import Home from "./Home";

        @Component
        export default class App extends Vue {
            goTo(){
                this.$navigateTo(Home);
            }
        }
    </script>

    <style scoped>
        ActionBar {
            background-color: #53ba82;
            color: #ffffff;
        }

        .message {
            vertical-align: center;
            text-align: center;
            font-size: 20;
            color: #333333;
        }
    </style>

Answer 1

您可以做的一件事是将路由文件导入到组件中，并使用路由对象中的密钥进行重定向。例如：

routes / index.js

import Home from './components/Home';

export default {
    home: Home,
}

在您的Vue组件中：

import routes from '~/routes'
export default {
    methods: {
        goTo() {
            this.$navigateTo(routes.Home)
        }
    }
}