Scenario
In frontend development, there are often scenarios of Page A
opening Page B
. If you want to transfer parameters from Page A
to Page B
, you can transfer them directly through the URL. But if you want to return data from Page B
to Page A
, the operation logic will be more complex
CabloyJS provides a page interaction mechanism, which makes parameter passing
and return value
between pages very convenient and natural
Page A
Open Page B
through method $view.navigate
on Page A
src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/page/openReturn.vue
onPerformOpen() {
return new Promise((resolve, reject) => {
this.$view.navigate('/test/party/kitchen-sink/page/pageReturn', {
context: {
params: {
value: this.value,
},
callback: (code, data) => {
if (code === 200) {
this.value = data.value;
resolve();
}
// Page B closed (no value returned)
if (code === false) {
reject();
}
// Page B closed (has value returned)
if (code === null) {
// do nothing
}
},
},
});
});
},
Name | Description |
---|---|
context | context |
context.params | parameters |
context.callback | callback |
context.callback
may be invoked twice:
Page B
returns value throughcallback
, at this timecode===200
- invoke
callback
again whenPage B
is closed. If you have value returned toPage A
,code===null
. Otherwise,code===false
Page B
src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/page/pageReturn.vue
<script>
import Vue from 'vue';
const ebPageContext = Vue.prototype.$meta.module.get('a-components').options.components.ebPageContext;
export default {
mixins: [ebPageContext],
data() {
return {};
},
computed: {
value() {
return this.contextParams.value;
},
},
methods: {
onPerformDone() {
const valueNew = this.value + 1;
this.contextCallback(200, { value: valueNew });
this.$f7router.back();
},
},
};
</script>
ebPageContext
The Page B
component need to mixin component ebPageContext
, so that it can get page parameters
and invoke callback
to return value
get page parameters
this.contextParams
contains the parameters passed by Page A
return value
Return value to Page A
through this.contextCallback
close page
Close Page B
through this.$f7router.back
, and navigate back to Page A
Comments: