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


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;
          // Page B closed (no value returned)
          if (code === false) {
          // 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:

  1. Page B returns value through callback, at this time code===200
  2. invoke callback again when Page B is closed. If you have value returned to Page A, code===null. Otherwise, code===false

Page B


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 });



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