Routing in nativescript-vue

I’m a big fan of Vue JS. So, when heading into mobile app development, Native script was the one thing which made me excited to work on. For those who are new to this, Nativescript is an open source framework which is used to create true native mobile apps for both Android and IOS. Nativescript supports Angular, Vue, Vanilla JS and Typescript. It is known for its performance, compared to other mobile app development frameworks like react native and ionic. Here in this blog, we are going to focus on nativescript-vue routing… Nativescript-vue is basically, Nativescript core combined with Vue JS.

How do we implement routing in nativescript-vue?

The shocking news here is, Vue routing is not supported in nativescript-vue. The Nativescript community is currently working on it. But for now, we have to go with manual routing methods. Let’s go ahead with manual routing… To implement manual routing, you just need to know the following three methods:

1. $navigateTo
2. $navigateBack
3. $showModal

• $navigateTo:

The functionality of $navigateTo is to redirect from one component to another. This method can be used in the view and in the methods like given below: Consider a scenario where the current component should be redirected to homePage component on click of the “Go” button. We use the $navigateTo methods like:

Or we could add in the method like :

goToHomePage() {

    this.$navigateTo(HomePage);

}

There might be a scenario where we need to pass data from one component to another component. In that case, the data can be passed as props using the $navigateTo method by.

this.$navigateTo(ComponentName, {

  props: {

   // pass the data as an object here

 }

});

What else we can do with “$navigateTo”?

This method also gives us properties to apply transitions while navigating to the next page. There are three ways to set the transition:

1. transition: Applies on all platforms.
2. transitioniOS: Applies only to IOS.
3. transitionAndroid: Applies only to Android.

The default transition is “platform”.

this.$navigateTo(NextComponent, {

  transition: {

     name: 'flip',

    duration: 2000,

   }

});

The below listed are the available transitions:

1. curl (same as curlUp) (iOS only)
2. curlUp (iOS only)
3. curlDown (iOS only)
4. explode (Android Lollipop(21) and up only)
5. fade
6. flip (same as flipRight)
7. flipRight
8. flipLeft
9. slide (same as slideLeft)
10. slideLeft
11. slideRight
12. slideTop
13. slideBottom

Another important property is clearHistory. “clearHistory” is used to clear the navigation history. It accepts a boolean value. Setting it to “true”, clears the navigation history. There are still a few other things that $navigateTo method can do. Refer here for the properties that are accepted by this method.

• $navigateBack:

This method is used to navigate back to the previous page. It is used like:

• $showModal:

This method is used to display the component inside a modal. For closing the modal we use “$modal.close”. Props are passed as an option to the $showModal as the following:

this.$showModal(Component, { props: { message: “Props is passed here”  }});

That’s it…. We have now mastered manual routing in nativescript-vue by learning simple three methods. Hope this blog was helpful and let me know your thoughts on this in the comments! Thanks for reading!

Reference:

https://nativescript-vue.org/en/docs/routing/manual-routing