在 NativeScript-Vue 中实现路由最简单的方法是使用以下任何一个便利函数

• $navigateTo
• $navigateBack

对于更复杂的导航场景，您可以使用多个 <Frame> 组件和一个专门用于导航的组件

• 模态视图
• 底部导航和标签
• 侧边抽屉

$navigateTo(Component, options)

您可以在视图中或在方法中调用 $navigateTo。

在视图中

在 Master 组件中，使用 data 属性来公开 Detail 组件。直接在视图中调用 $navigateTo(<propertyName>)。

import Vue from 'nativescript-vue';

const Master = {
  template: `
    <Page>
      <ActionBar title="Master" />
      <StackLayout>
        <Button text="To Details directly" @tap="$navigateTo(detailPage)" />
      </StackLayout>
    </Page>
  `,

  data() {
    return {
      detailPage: Detail
    }
  }
};

const Detail = {
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label text="Details.." />
      </StackLayout>
    </Page>
  `
};

new Vue({
  render: h => h('frame', [h(Master)])
}).$start()

在方法中

将一个按钮绑定到一个方法，并使用 this.$navigateTo(Detail) 来导航到 Detail 组件。

const Master = {
  template: `
    <Page>
      <ActionBar title="Master" />
      <StackLayout>
        <Button text="To Details via method" @tap="goToDetailPage" />
      </StackLayout>
    </Page>
  `,

  methods: {
    goToDetailPage() {
      this.$navigateTo(Detail);
    }
  }
};

const Detail = {
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label text="Details.." />
      </StackLayout>
    </Page>
  `
};

将属性传递给目标组件

$navigateTo 接受第二个 options 参数。您可以使用该参数来

• 设置过渡
• 传递一个 props 对象，用于实例化目标组件

例如

this.$navigateTo(Detail, {
  transition: {},
  transitioniOS: {},
  transitionAndroid: {},

  props: {
    foo: 'bar',
  }
});

有关您可以传递的选项的更多信息，请参阅 NavigationEntry。

指定过渡

您可以使用任何内置的过渡

• curl（与 curlUp 相同）（仅限 iOS）
• curlUp（仅限 iOS）
• curlDown（仅限 iOS）
• explode（仅限 Android Lollipop(21) 及更高版本）
• fade
• flip（与 flipRight 相同）
• flipRight
• flipLeft
• slide（与 slideLeft 相同）
• slideLeft
• slideRight
• slideTop
• slideBottom

例如

this.$navigateTo(Detail, {
  transition: {
    name: "slideLeft",
    duration: 300,
    curve: "easeIn"
  },
});

在框架内导航

每个 <Frame> 元素都有自己的导航堆栈。如果您使用的是 多个框架，您可能需要指定导航将在哪个框架中进行。例如，在侧边栏中有一个按钮，可以更改主区域中的页面。您可以通过添加 frame 选项来实现这一点

this.$navigateTo(SomeComp, {
  frame: '<id, or ref, or instance>'
});

frame 选项的值可以是以下之一

• <Frame> 组件的 id（例如：<Frame id="main-frame">）
• <Frame> 的 ref（例如：<Frame ref="mainFrame">）
• <Frame> 实例本身

$navigateBack(options, backstackEntry = null)

在 Detail 组件中，添加一个按钮，该按钮触发全局公开的 $navigateBack 函数。

const Detail = {
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Button text="Back to Master" @tap="$navigateBack" />
      </StackLayout>
    </Page>
  `
};

模态视图导航

使用 $showModal 模态显示 Detail 页面。此函数的行为与 $navigateTo 类似。

要关闭模态，请调用 $modal.close。

const Master = {
  template: `
    <Page>
      <ActionBar title="Master" />
      <StackLayout>
        <Button text="Show Details modally" @tap="showDetailPageModally" />
      </StackLayout>
    </Page>
  `,

  methods: {
    showDetailPageModally() {
      this.$showModal(Detail);
    }
  }
};

const Detail = {
  template: `
    <Frame>
      <Page>
        <ActionBar title="Detail"/>
        <StackLayout>
          <Button @tap="$modal.close" text="Close" />
        </StackLayout>
      </Page>
    </Frame>
  `
};

注意：我们将 Detail 页面包装在一个 <Frame> 元素中，这使我们能够显示 <ActionBar> 并进一步在模态中导航。

将属性传递给模态

$showModal 接受第二个参数。您可以使用该参数将 props 对象传递给目标组件。例如

this.$showModal(Detail, { props: { id: 14 }});

您还需要更新 Detail 组件，使其能够接受 id 属性。您可以通过在组件内部定义 props 选项来实现这一点

const Detail = {
  props: ['id'],
  template: `
    <Page>
      <ActionBar title="Detail"/>
      <StackLayout>
        <Label :text="id" />
        <Button @tap="$modal.close" text="Close" />
      </StackLayout>
    </Page>
  `,
};

现在，该属性在整个组件中都可以通过 this.id 访问。

有关属性的更多信息，请参阅 Vue 官方文档

强制模态全屏显示

此选项仅在 Android 上生效，因为 iOS 模态始终是全屏显示的。

this.$showModal(Detail, { fullscreen: true, props: { id: 14 }});

从模态返回数据

当调用 $showModal 时，会返回一个 promise，该 promise 会解析为传递给 $modal.close 函数的任何数据。

在以下示例中，关闭模态会在控制台中输出 'Foo'。

// ... inside Master
this.$showModal(Detail).then(data => console.log(data));

<!-- inside Detail -->
<Button @tap="$modal.close('Foo')" text="Close" />

侧边抽屉导航

我们已经构建了 <MultiDrawer>，允许从所有方向在屏幕上显示多个抽屉。请参考项目 github 页面中的文档：https://github.com/nativescript-vue/nativescript-vue-multi-drawer

另一个选择是 <RadSideDrawer> 组件。有关更多信息，请参阅 专门的文章。

要使用 <RadSideDrawer> 创建一个新应用程序，请运行

ns create myDrawerApp --template @nativescript/template-drawer-navigation-vue