Passing changed props in $navigateBack

Question

I have a overview page where people can see there results. They have an option to change that value by clicking on the edit button. By clicking on the edit button you will be navigated to an other page where you can change the value. If you changed the value you will come back to the overview page. But my problem is the props I pass with this.$navigateBack() aren't changed in the overview page.

Overview page

<template>
<Page class="confirmPage" actionBarHidden="true">
    <StackLayout>
        <Button class="back fas btn btn-db" :text="'\uf060 Route Details' | unescape" @tap="$navigateBack"></Button>
        <GridLayout columns="2*, 2*, 1*" rows="*, *, *" class="routeDetails">
            <Label row="0" col="0" class="centerIt" text="Ziekenhuis"></Label>
            <Label row="0" col="1" :text="$props.hospital"></Label>
            <Label row="0" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditHospital"></Label>

            <Label row="1" col="0" class="centerIt" text="Startpunt"></Label>
            <Label row="1" col="1" :text="$props.startpoint"></Label>
            <Label row="1" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditStartpoint"></Label>

            <Label row="2" col="0" class="centerIt" text="Bestemming"></Label>
            <Label row="2" col="1" :text="$props.endpoint"></Label>
            <Label row="2" col="2" class="fas btn btn-t-d btn-cr-sm" :text="'\uf303' | unescape" @tap="onEditEndpoint"></Label>
        </GridLayout>
        <Button class="confirm btn btn-b-db btn-r btn-t-w" @tap="log" text="BEVESTIG"></Button>
    </StackLayout>
</Page>
</template>

Script for the overview page

<script>
import editChooseHospital from "../Edit/EditChooseHospital/EditChooseHospital";
    import editChooseStartpoint from "../Edit/EditChooseStartpoint/EditChooseStartpoint";
    import editChooseEndpoint from "../Edit/EditChooseEndpoint/EditChooseEndpoint";


    export default {
        props: ['hospital', 'startpoint', 'endpoint'],
        methods: {
            log : function (args){
              console.log(this.endpoint,this.hospital,this.startpoint);
            },
            onEditHospital: function (args) {
                this.$navigateTo(editChooseHospital, {
                    props: {
                        startpoint: this.startpoint,
                        endpoint: this.endpoint
                    }
                })
            },
        }
    }
</script>

Edit page

<template>
    <Page class="manualInputPage" actionBarHidden="true">
        <FlexBoxLayout class="layout">
            <Button class="back fas btn btn-lb" :text="'\uf060' | unescape" @tap="$navigateBack"></Button>
            <SearchBar class="searchbar" :text="searchValue" hint="Search" textFieldBackgroundColor="white" @textChange="onTextChanged" @submit="onSubmit"></SearchBar>
            <ListView class="list-group" for="items in hospitals" @itemTap="onItemTap" separatorColor="transparent">
                <v-template>
                    <Label class="item" :text="items.name"></Label>
                </v-template>
            </ListView>
            <Label class="bottom-info"></Label>
        </FlexBoxLayout>
    </Page>
</template>

Script for the edit page

<script>
    export default {
        props: ['startpoint', 'endpoint'],
        methods: {
            onItemTap: function (args) {
                console.log(this.hospitals[args.index].name);
                this.searchValue = this.hospitals[args.index].name;
            },
            onTextChanged: function (args) {

            },
            onSubmit: function (args) {
                console.log(this.searchValue, this.startpoint, this.endpoint);
                this.$navigateBack({
                    props: {
                        hospital: this.searchValue,
                        startpoint: this.startpoint,
                        endpoint: this.endpoint
                    }
                })
            }
        }
    }
</script>

I don't know if it is possible the docs about this.$navigateBack() aren't very clear to me you can pass options in the function. But what are those options?

Demo

https://play.nativescript.org/?template=play-vue&id=5OsNCC&v=2

Solution thanks to Manoj

https://play.nativescript.org/?template=play-vue&id=5OsNCC&v=3

Answer 1

props are not supported in back navigation, the component already exists. There are other options you could try,

1. Pass an object in props when calling $navigatingTo. As objects are passed by reference, it should update the actual source as you perform changes in new component, for example.
2. Use event bus
3. Vuex also works