返回操作 router.back(),能否传递参数给上一级页面?


目前不能,可以借助于 app 实现

在 app 中增加缓存的数据,并提供读写缓存数据的能力。app 实现代码如下:

<script>
  export default {
    onCreate () {
      // 初始化 app 缓存的数据
      this.dataCache = {}
    },
    /**
     * 获取 app 缓存的数据
     * @param key
     */
    getAppData (key) {
      return this.dataCache[key]
    },
    /**
     * 设置 app 缓存的数据
     * @param key
     * @param val
     */
    setAppData (key, val) {
      this.dataCache[key] = val
    }
  }
</script>

页面 A 和页面 B 通过 app 缓存数据传递参数:

在页面 A 中,当页面显示时,读取 app 缓存数据,获取参数。页面 A 实现代码如下:

<template>
  <div class="tutorial-page">
    <a href="/PageParams/returnParams/pageb">跳转到页面B</a>
    <text>{{msg}}</text>
  </div>
</template>

<style>
  .tutorial-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  a {
    margin-top: 75px;
    font-size: 30px;
    color: #09ba07;
    text-decoration: underline;
  }
</style>

<script>
  export default {
    private: {
      msg: ""
    },
    onInit() {
      this.$page.setTitleBar({ text: "页面A" });
    },
    onShow() {
      // 页面被切换显示时,从数据中检查是否有页面B传递来的数据
      const data = this.$app.getAppData("dataFromB");
      if (data && data.destPageName === "pageA") {
        // 获取回传给本页面的数据
        this.msg = data.params && data.params.msg;
      }
    }
  };
</script>

在页面 B 中,当页面隐藏时,设置 app 缓存数据,写入参数。页面 B 实现代码如下:

<template>
  <div class="tutorial-page">
    <text>页面B</text>
    <input
      style="width: 450px;"
      placeholder="请输入回传给页面A的信息"
      onchange="updateMsg"
    />
  </div>
</template>

<style>
  .tutorial-page {
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
</style>

<script>
  export default {
    private: {
      msg: ""
    },
    onInit() {
      this.$page.setTitleBar({ text: "页面B" });
    },
    onHide() {
      // 页面被切换隐藏时,将要传递的数据对象写入
      this.$app.setAppData("dataFromB", {
        destPageName: "pageA",
        params: {
          msg: this.msg
        }
      });
    },
    updateMsg(evt) {
      // 更新input输入的信息文本
      this.msg = evt.text;
    }
  };
</script>

参考 官方文档

results matching ""

    No results matching ""