Another Vue of NativeScript Webinar is now on YouTube
Manual Routing

The easiest way to implement routing in NativeScript-Vue is to use any of the following convenience functions:

All examples on this page discuss how to handle routing between the Master and Detail components of a mobile app.

You can call $navigateTo in the view or in a method.

In the view

In the Master component, use a data property to expose the Detail component. Invoke $navigateTo(<propertyName>) in the view directly.

const Vue = require('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()

In a method

Bind a button to a method and use this.$navigateTo(Detail) to navigate to the Detail component.

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>
  `
};

Passing props to the target component

$navigateTo accepts a second options parameter. You can use the parameter to:

  • Set the transition
  • Pass a props object to be used when instantiating the target component

For example:

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

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

For more information about the options that you can pass, see NavigationEntry.

Each <Frame> element has its own navigation stack. If you are using multiple frames, you may want to specify in which frame the navigation will occur. For example, having a button in the side bar that changes the page in the main area. You can do this by adding the frame option:

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

The value for the frame option can be one of the following:

  • the id of the <Frame> component (for example: <Frame id="main-frame">)
  • the ref for the <Frame> (for example: <Frame ref="mainFrame">)
  • the <Frame> instance itself

In the Detail component, add a button that triggers the globally exposed $navigateBack function.

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

$showModal

Use $showModal to show the Detail page modally. This function behaves similarly to $navigateTo.

You can call $showModal in the view or in a method. To close the modal, call $modal.close.

In the view

In the Master component, use a data property to expose the Detail component. Invoke $showModal(<propertyName>) in the view directly.

const Vue = require('nativescript-vue');

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

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

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

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

In a method

Bind a button to a method and use this.$showModal(Detail) to navigate to the Detail component.

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>
  `
};

Note: We've wrapped the Detail page in a <Frame> element, which allows us to show the <ActionBar> as well as navigate further within the modal.

Passing props to the modal

$showModal accepts a second parameter. You can use the parameter to pass in a props object to the target component. For example:

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

You also need to update the Detail component to be able to accept the id prop. You can do this by defining a props option inside the component:

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

The prop is now accessible throughout the component with this.id.

For more information about props, see the official Vue documentation

Forcing the modal to be fullscreen

This option only takes effect on Android, as iOS modals are always fullscreen.

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

Returning data from the modal

When calling $showModal, a promise is returned which resolves with any data passed to the $modal.close function.

In the following example, closing the modal outputs 'Foo' in the console.

// ... inside Master
this.$showModal(Detail).then(data => console.log(data));
<!-- inside Detail -->
<Button @tap="$modal.close('Foo')" text="Close" />
Contributors