1. uniapp页面跳转及传参

1.1. 页面跳转及传参

  当前页面A携带参数给下一页面B。

1.1.1. 方式一（字符串）

  （1）跳转并传参

    /**
     * 页面跳转1
     */
    intentClick: function () {
      this.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=` + this.name
      });
    },

  （2）接收传参

 onLoad(e) {
    let that = this
    if (e.name) {
      that.name = e.name
    }
  },

1.1.2. 方式二（字符串）

  （1）跳转并传参

    /**
     * 页面跳转2
     */
    intent2Click: function () {
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=${this.name}`
      });
    },

  （2）接收传参

 onLoad(e) {
    let that = this
    if (e.name) {
      that.name = e.name
    }
  },

1.1.3. 方式三（对象、数组）

  （1）跳转并传参

   /**
     * 页面跳转3
     */
    intent3Click: function () {
      //注意：传的参数是对象数组时需要使用JSON.stringify()转化成json字符串，
      //onLoad接收参数时再转化回来。
      let paramObj = this.paramObj
      paramObj.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?paramObj=${JSON.stringify(this.paramObj)}`
      });
      // navigateTo({
      //   url: `../intentParam2Page/intentParam2Page?paramObj=` + JSON.stringify(this.paramObj)
      // });
    },

  （2）接收传参

  onLoad(e) {
    let that = this
    if (e.paramObj) {
      let paramObj = JSON.parse(e.paramObj)
      that.name = paramObj.name
    }
  },

1.2. 返回上一页面并传参

  在A页面中通过跳转到B页面，在B页面中处理的数据，需要跳转回A页面供其使用。

1.2.1. 方式一

  触发单个方法时使用
  （1）跳转并传参

   /**
     * 返回并传参1
     */
    backClick: function () {
      //触发单个方法时使用
      //当前页面栈
      var pages = getCurrentPages();
      //获取上一个页面实例对象
      let beforePage = pages[pages.length - 2];
      let name="返回的数据"
      //触发上一个页面中的getUserInfo方法
      beforePage.$vm.getBackInfo(name);
      uni.navigateBack();
    }

  （2）返回上一页面并传参

  /**
     * 跳转返回并传参1
     */
    intentBackClick: function () {
      //触发单个方法时使用
      this.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=` + this.name
      });
    },
    /**
     * 获取返回传参1
     */
    getBackInfo: function (e) {
      console.log("wedew=====",e)
      this.name=e
    }

1.2.2. 方式二

  触发多个方法时使用

//当前页面
methods:{
    getList(){
        var pages = getCurrentPages(); //当前页面栈  
        let beforePage = pages[pages.length - 2]; //获取上一个页面实例对象  
        beforePage.$vm.reFresh = Math.random()//触发上一页监听器
        uni.navigateBack();
    }
}
 
 
//上级页面
data() {
    return {
        reFresh:""
    }
}
watch:{
	reFresh:function(){
		this.getList();
		console.log("页面已重新加载");
    }
},

1.2.3. 方式三

  返回上级页面并传递参数

// 当前页面
methods:{
    selectedAdd() {
        let id = 10;
	    uni.$emit('closeData', id);
		uni.navigateBack();
	}
}
 

//上级页面
onShow() {
	uni.$once('closeData',(data) => {
        console.log('监听返回的参数：' + data)
	})
},

1.2.4. 方式四

  在B页面的跳转事件中
  使用 getCurrentPages() 详情见官方文档
  获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
  获得上个页面实例
  给上个页面实例绑定方法和参数
  返回上一页面

// 当前页面
    /**
     * 跳转返回并传参4：第二步B界面返回传参
     */
    back4Click: function () {
      // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
      let pages = getCurrentPages()
      // 2. 上一页面实例
      // 注意是length长度，所以要想得到上一页面的实例需要 -2
      // 若要返回上上页面的实例就 -3，以此类推
      let prevPage = pages[pages.length -2]
      // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
      prevPage.$vm.getValue("wedwedfewrf")
      // 4. 返回上一页面
      uni.navigateBack({
        delta: 1 // 返回的页面数
      })
    }

  在A页面中使用刚刚绑定的getValue()方法接收B页面传递的数据

//上级页面
    /**
     * 跳转返回并传参4：第三步A界面接收B界面返回传参
     */
    getValue(paramsObj) {
      console.log(paramsObj, 'B页面传递的数据')
    }

1.3. 完整代码

1.3.1. A界面

<template>
  <view class="base-btn-layout">
    <view class="base-btn-txt"
          @click="intentClick()">
      页面跳转方法1
    </view>
  </view>
  <view class="base-btn-layout">
    <view class="base-btn-txt"
          @click="intent2Click()">
      页面跳转2
    </view>
  </view>
  <view class="base-btn-layout">
    <view class="base-btn-txt"
          @click="intent3Click()">
      页面跳转3
    </view>
  </view>
  <view class="base-btn-layout">
    <view class="base-btn-txt"
          @click="intentBackClick()">
      跳转返回并传参1
    </view>
  </view>
  <view class="base-btn-layout">
    <view class="base-btn-txt"
          @click="intentBack2Click()">
      跳转返回并传参2
    </view>
  </view>

  <view class="base-btn-layout">
    <view class="base-btn-txt"
          @click="intentBack3Click()">
      跳转返回并传参3
    </view>
  </view>
  <view class="base-btn-layout">
    <view class="base-btn-txt"
          @click="intentBack4Click()">
      跳转返回并传参4
    </view>
  </view>

  <text class="item-title">{{ name }}</text>
</template>
<script>
import pageUtil from "../../../utils/pageUtil";

export default {
  data() {
    return {
      name: "第一个页面传的数据",
      userdata:{},
      paramObj: {}
    }
  },
  onReady() {
    pageUtil.setTitleBar("第一页面")
  },
  onShow() {
    /**
     * 跳转返回并传参3：第三步A界面接收B界面返回传参
     */
    uni.$once('closeData', (data) => {
      console.log('监听返回的参数：' + data)
    })

  },
  methods: {
    /**
     * 页面跳转方法1：第一步A界面传参
     */
    intentClick: function () {
      this.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=` + this.name
      });
    },
    /**
     * 页面跳转2：第一步A界面传参
     */
    intent2Click: function () {
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=${this.name}`
      });
    },

    /**
     * 页面跳转3：第一步A界面传参
     */
    intent3Click: function () {
      //注意：传的参数是对象数组时需要使用JSON.stringify()转化成json字符串，
      //onLoad接收参数时再转化回来。
      let paramObj = this.paramObj
      paramObj.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?paramObj=${JSON.stringify(this.paramObj)}`
      });
      // navigateTo({
      //   url: `../intentParam2Page/intentParam2Page?paramObj=` + JSON.stringify(this.paramObj)
      // });
    },
    /**
     * 跳转返回并传参1：第一步A界面传参
     */
    intentBackClick: function () {
      //触发单个方法时使用
      this.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=` + this.name
      });
    },
    /**
     * 跳转返回并传参1：第三步A界面接收B界面返回传参
     */
    getBackInfo: function (e) {
      console.log("wedew=====", e)
      this.name = e
    },

    /**
     * 跳转返回并传参2：第一步A界面传参
     */
    intentBack2Click: function () {
      //触发多个方法时使用
      this.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=` + this.name
      });
    },

    /**
     * 跳转返回并传参3：第一步A界面传参
     */
    intentBack3Click: function () {
      //触发多个方法时使用
      this.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=` + this.name
      });
    },

    /**
     * 跳转返回并传参4：第一步A界面传参
     */
    intentBack4Click: function () {
      //触发多个方法时使用
      this.name = "第一个页面传的数据"
      uni.navigateTo({
        url: `../intentParam2Page/intentParam2Page?name=` + this.name
      });
    },

    /**
     * 跳转返回并传参4：第三步A界面接收B界面返回传参
     */
    getValue(paramsObj) {
      console.log(paramsObj, 'B页面传递的数据')
    }
  },
  watch: {
    /**
     * 跳转返回并传参2：第三步A界面接收B界面返回传参
     */
    reFresh: function (e) {
      console.log("页面已重新加载", e);
      //可以写多个方法
      //this.getList()
      //this.getList2()
    }
  },
}
</script>

<style>


</style>

1.3.2. B界面

<template>
  <view>
    <view class="base-btn-layout">
      <view class="base-btn-txt"
            @click="backClick()">
        返回并传参1
      </view>
    </view>
    <view class="base-btn-layout">
      <view class="base-btn-txt"
            @click="back2Click()">
        返回并传参2
      </view>
    </view>
    <view class="base-btn-layout">
      <view class="base-btn-txt"
            @click="back3Click()">
        返回并传参3
      </view>
    </view>
    <view class="base-btn-layout">
      <view class="base-btn-txt"
            @click="back4Click()">
        返回并传参4
      </view>
    </view>
    <text class="item-title">{{ name }}</text>
  </view>
</template>
<script>
import pageUtil from "../../../utils/pageUtil";

export default {
  data() {
    return {
      name: "",
    }
  },
  onLoad(e) {
    let that = this
    //页面跳转方法1：第二步 B界面获取传参
    //页面跳转方法2：第二步 B界面获取传参
    if (e.name) {
      that.name = e.name
    }
    //页面跳转方法3：第二步 B界面获取传参
    if (e.paramObj) {
      let paramObj = JSON.parse(e.paramObj)
      that.name = paramObj.name
    }
  },
  onReady() {
    pageUtil.setTitleBar("第二页面")
  },
  methods: {
    /**
     * 跳转返回并传参1：第二步B界面返回传参
     */
    backClick: function () {
      //触发单个方法时使用
      //当前页面栈
      var pages = getCurrentPages();
      //获取上一个页面实例对象
      let beforePage = pages[pages.length - 2];
      let name = "返回的数据"
      //触发上一个页面中的getUserInfo方法
      beforePage.$vm.getBackInfo(name);
      uni.navigateBack();
    },

    /**
     * 跳转返回并传参2：第二步B界面返回传参
     */
    back2Click: function () {
      //触发多个方法时使用
      //当前页面栈
      var pages = getCurrentPages();
      //获取上一个页面实例对象
      let prevPage = pages[pages.length - 2];
      console.log(prevPage.data)//为传过来的值
      //触发上一页监听器
      prevPage.$vm.reFresh = Math.random()
      uni.navigateBack();

    },
    /**
     * 跳转返回并传参3：第二步B界面返回传参
     */
    back3Click: function () {
      let id = 10;
      uni.$emit('closeData', id);
      uni.navigateBack();
    },
    /**
     * 跳转返回并传参4：第二步B界面返回传参
     */
    back4Click: function () {
      // 1. 获取当前页面栈实例（此时最后一个元素为当前页）
      let pages = getCurrentPages()
      // 2. 上一页面实例
      // 注意是length长度，所以要想得到上一页面的实例需要 -2
      // 若要返回上上页面的实例就 -3，以此类推
      let prevPage = pages[pages.length -2]
      // 3. 给上一页面实例绑定getValue()方法和参数（注意是$vm）
      prevPage.$vm.getValue("wedwedfewrf")
      // 4. 返回上一页面
      uni.navigateBack({
        delta: 1 // 返回的页面数
      })
    }
  },
}
</script>

<style>
.page-layout {
  display: flex;
  flex-direction: column;
}

.item-title {
  font-size: 26px;
  color: #333333;
  text-align: center;
}

.relative-layout {
  display: flex;
  flex-direction: row;
}

.relative-item-layout {
  position: relative;
}


</style>