Nativescript Vue pass data between pages using navigateTo

Nativescript Vue pass data between pages using navigateTo 1

While making an android app we encounter many situations when we have to pass data from one page to another. In this post, we’ll show the simple and easy way to implement this functionality in your native-script Vue application. In Native Android development with Java, Bundles were used to transfer content between activities/fragment embedding contents into the bundle of a context object. In the native script, it’s very simple and straightforward.

We need to implement pages to pages data passing in various cases such as Master detail layouts, categories page, navigation menu, games, etc.

Suppose we need to transfer the data(ie category) from one activity (A) to another (B).
In Activity A:

let category={
name:"History",
url:"https://...",
icon:"res://history
}
this.$navigateTo(ActivityB, {
props: { category: category }
});

In Activity B retrieve the passed object as,

export default {
name: "ActivityB",
props: ["category"],
mounted(){
console.log(this.$props.category);
}
}

We can use this.$props.[propName] for retrieving the passed value from parent activity.
Thanks for reading this post. If you faced any problem, please let us know in the comment section below. Thank You.

 

Leave a Reply

Your email address will not be published.