使用 NativeScript-Vue 入门：第一集

·

作为 NativeScript-Vue 的新手，在导航文档中看到以下内容时，您可能会有些担心：

Vue 路由器（不受支持）

Vue 路由器…不受支持???！？这意味着什么？我们是否永远只能以单一视图锁定 Vue 应用程序？为什么会这样，我们做了什么使这个可怕的诅咒摆在我们身上？

幸运的是，事情并没有您想像的那么可怕。您可能会猜到，上面的“手动路由”选项将引导您讨论如何在没有我们熟悉的 Vue Router 的情况下进行路由。不仅如此，您还可以应用其他替代方法。

在本文中，我将介绍一些 Vue 和 NativeScript 路由示例。您将拥有完整的示例，可以立即使用并与自己的项目一起使用。在继续之前，我要非常感谢 Jen Looper 对本文的帮助。如果您尚未看过令人难以置信的 Vue Vixens 项目，但您应该尽快这样做！

像我们的祖先一样航行

第一种，也是最简单的导航方式，就像我们的祖父母一样。上坡，双向，在雪中。好吧，也许还不错。手动布线的文档讨论了两种不同的方法。（还讨论了处理模式的第三种方法。就我个人而言，我不认为这种“导航”，但知道这是一种选择。）

第一个$navigateTo讨论了如何从应用程序中的一个视图转移到另一个视图。以最简单的形式，您只需说出要导航到的组件，但是还可以传递多个参数，详细说明诸如过渡和要沿途发送的数据之类的内容。

第二个，$navigateBack处理返回到最后一个视图。漂亮又简单。

给定这两种方法，如何做一个完整的例子？让我们从两个视图（路由）应用程序开始。第一个组件将链接到第一个组件，第二个组件将链接回。我在 NativeScript 操场上创建了一个新的 NativeScript Vue 应用程序。这是初始组件：

<template>
    <Page class="page">
        <ActionBar title="Home" class="action-bar" />
        <StackLayout>
            <Button @tap="goToSecond" text="Go to Second"></Button>
        </StackLayout>
    </Page>
</template>
<script>
import Second from './Second';
export default {
    data () {
        return {
        };
    },
    methods: {
        goToSecond() {
            this.$navigateTo(Second)
        }
    }
}
</script>
<style scoped>
</style>

布局总共包含一个 UI 项，一个带有tap执行事件的按钮goToSecond。然后，该方法this.$navigateTo用于将用户发送到下一个组件。让我们看看。

<template>
    <Page class="page">
        <ActionBar title="Second" class="action-bar" />
        <StackLayout>
            <Button @tap="this.$navigateBack" text="Go Back"></Button>
        </StackLayout>
    </Page>
</template>
<script>
    export default {
        data() {
            return {};
        }
    };
</script>
<style>
</style>

这个也只有一个 UI 项，一个按钮，但是请注意，我没有为tap事件定义方法，而是直接在其中内联。这对于第一个组件同样适用。您可以在此 NativeScript Playground 项目中自己进行测试。

导航样式（和数据）

使用时，$navigateTo您可以传递第二个参数，该参数可让您指定过渡效果以及props要发送到第二个视图的（数据）。您可以使用此参数执行更多操作，并且可以在 NavigationEntry 参考指南中找到完整的文档。这是一个使用fade过渡的简单示例。

this.$navigateTo(Second, {
  transition: {
    name: 'fade',
    duration: 200
  }
});

通过 props 密钥传递数据：

this.$navigateTo(Second, {
  transition: {
    name: 'fade',
    duration: 200
  },
  props: {
    something: 1,
    somethingElse: 'cat'
  }
});

使用道具时，这些值最终会作为道具传递到下一页。因此，就像在任何 Vue 组件中一样，如果您定义了 props 数组props: ['something', 'somethingElse']，那么您可以简单地使用传入的代码：

Hello, I like to eat pie and {{ something }} along with {{ somethingElse }}.

举一个完整的例子，这会更有意义。让我们使用 Star Wars API 构建一个简单的两页应用程序。第一页将访问 API 以获取电影列表。我们将其显示为电影标题列表。在上tap，我们将导航到新页面。API 一次返回所有电影数据，因此我们可以将电影数据作为props值传递给下一个视图。

让我们从第一页开始，这是一个名为的组件Films.vue：

<template>
    <Page class="page">
        <ActionBar title="Movies" class="action-bar" />
        <ScrollView height="100%">
            <ListView for="movie in movies" @itemTap="loadMovie">
                <v-template>
                    <Label :text="movie.title" padding="20" />
                </v-template>
            </ListView>
        </ScrollView>
    </Page>
</template>
<script>
import Film from './Film';
export default {
    methods: {
        loadMovie(e) {
            this.$navigateTo(Film, {
                transition: {
                    name: 'fade',
                    duration: 1000
                },
                props: {
                    film: e.item
                }
            });
        }
    },
    data() {
        return {
            movies: []
        };
    },
    created() {
        fetch("https://swapi.co/api/films/")
        .then(res => res.json())
        .then(res => {
            this.movies = res.results;
        })
        .catch(e => {
            console.log('Error calling API', e);
        });
    }
};
</script>

布局非常简单，只是一个ListView组件。我把它带到一个movies数组中，稍后再加载。该tap事件将触发loadMovie，这就是我们进行导航的地方。

在 JavaScript 中，我使用created事件来调用“星球大战” API。我解析 JSON，然后将结果分配给movies数组。

该loadMovie方法用于this.$navigate指定我要去的地方（Film组件），定义过渡以及我的props值（在这种情况下仅为 1）film。现在让我们看一下Film组件：

<template>
    <Page class="page">
        <ActionBar :title="film.title" class="action-bar" />
        <StackLayout height="100%">
            <Label :text="film.opening_crawl" textWrap="true" />
            <Button @tap="this.$navigateBack" text="Back" />
        </StackLayout>
    </Page>
</template>
<script>
export default {
    props: ["film"],
    data() {
        return {};
    }
};
</script>

在此组件中，我所做的所有工作都被定义film为道具。由于导航将传递它，因此我可以在组件中使用电影数据。《星球大战》 API 返回了许多有关电影的信息，但是为了使事情简单，我将展示开幕爬网。

万一你不记得什么是“爬行” …

您可以在此 NativeScript Playground 项目中自己玩。

下一步？
在本文中，我研究了使用 NativeScript 和 Vue 时导航的基础知识。在我的下一篇文章中，我将通过另外两个示例来提高层次：选项卡式界面和使用 NativeScript 社区中类似“ Vue Router”的资源。