【uni-app】携带数据跳转界面

---

uni-app项目中，页面需要用到上一个页面的数据，这就需要携带数据进行跳转。

创建页面

创建两个页面，profile是前一个页面，queryParticles是下一个页面。

配置路由跳转

在page.json文件里面配置路由

{
			"path": "pages/queryParticles/queryParticles",
			"style": {
				"navigationBarTitleText": "课程展示",
				"enablePullDownRefresh": false
			}
		},

跳转页面

写一个click事件，方法是 queryParticles，里面携带“user”的数据

	async queryParticles(user){
			this.localStorage.set("classId",user.classId);
			this.localStorage.set("courseId",user.courseId);
				//判断当前的班课是否可以跳转
				let res = await this.$u.api.getLookBack();
				console.log(res)
				if(res.data.code == "0000"){
					let data={
					'name':user.name,
					'classId':user.classId,
					'courseId':user.courseId
					}
			//这里是携带参数跳转页面的接口
				uni.navigateTo({ 
					url: "/pages/queryParticles/queryParticles?data="+encodeURIComponent(JSON.stringify(data)),
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})
				}else{
					// showModal: true, //提示框是否显示
					uni.showToast({
						title: '当前课程不支持回看',
						icon:'none',
						duration: 2000
					});
			}
		},

跳转页面的接口：

	uni.navigateTo({ 
					url: "/pages/queryParticles/queryParticles?data="+encodeURIComponent(JSON.stringify(data)),
					success: res => {console.log("调用成功")},
					fail: () => {console.log("调用失败")},
					complete: () => {console.log("调用完成")}
				})

url：跳转路径，路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔；如 ‘path?key=value&key2=value2’，path为下一个页面的路径，下一个页面的onLoad函数可得到传递的参数。

接收数据

//使用onload函数接收参数
  onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数		
		 const Data=JSON.parse(decodeURIComponent(option.data));
		  this.ChapterInfo.class_id=Data.classId;
		  //将classid 和courseID存入缓存中
		  this.localStorage.set("classId", Data.classId);
		  this.ChapterInfo.course_id=Data.courseId;
		  this.localStorage.set("courseId", Data.courseId);
		  this.handleSearch();
      },