在 $navigateBack 中传递更改后的 props

我有一个概述页面，人们可以在其中看到结果。他们可以选择通过单击编辑按钮来更改该值。通过单击编辑按钮，您将导航到可以更改值的其他页面。如果您更改了该值，您将返回到概述页面。 但我的问题是我传递的道具this.$navigateBack()概览页面中未更改。

概览页面

<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>
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>

编辑页面

<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>
    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>

不知道是否可以the docs about this.$navigateBack()我不太清楚你可以在函数中传递选项。但这些选择是什么？

Demo

感谢 Manoj 的解决方案

props后退导航不支持，该组件已存在。您还可以尝试其他选择，

1. 传入一个对象props打电话时$navigatingTo。由于对象是通过引用传递的，因此当您在新组件中执行更改时，它应该更新实际源，例如example.
2. 使用事件总线
3. Vuex 也可以工作