NativeScript-Vue 2.0: Back to the Vueture (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

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