vue_uniapp跳转页面传递参数

vue跳转页面传递参数

本章节主要是讲解在vue跳转页面时候怎么传递参数。最后会发上实现源代码。

准备工作

首先准备好两个vue文件，配置好page.json页面路径

功能实现

js中写好一个要传递的参数a、跳转时需要的事件tiaozhuan()、在a参数加上数据，下面举例说明。

// js举例代码
data() {
			return {
				a: []
			}
		},
		onLoad() {
			this.addtemp()
		},
		methods: {
			addtemp() {
				this.a.push({name:"张三"})
			},
			tiaozhuan() {
				uni.navigateTo({
					url: '/pages/uni-style/navi'
				})
			}

跳转参数的方式就是在url中添加数据名和解析对象的字符串。通过JSON.stringify对a对象解析出字符串，语法格式如下：
url:‘/…/…/…?a=’+JSON.stringify(this,a)
其中a是参数名，this.a是参数的实际JSON数据。跳转后接收的方式是在onLoad加载事件中取值

// An highlighted block
data() {
			return {
				test: ''
			}
		},
		onLoad(options) {
			let temp = JSON.parse(options.a)
			this.test = temp[0].name
			console.log(this.test)
		}

在这里我做了一个test作为接收的参数，用options和JSON.parse方法接收值，JSON.parse主要作用是把一个JSON字符串解析成一个对象。通过中间值temp来对新页面数据进行赋值。接下就是代码和成品展示。
下面展示。

// 跳转前页面
<template>
	<view>
		<view @click="tiaozhuan">跳转</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				a: []
			}
		},
		onLoad() {
			this.addtemp()
		},
		methods: {
			addtemp() {
				this.a.push({name:"张三"})
			},
			tiaozhuan() {
				uni.navigateTo({
					url: '/pages/uni-style/navi?a=' + JSON.stringify(this.a)
				})
			}
		}
	}
</script>

<style>
</style>

// 跳转后代码
<template>
</template>

<script>
	export default {
		data() {
			return {
				test: ''
			}
		},
		onLoad(options) {
			let temp = JSON.parse(options.a)
			this.test = temp[0].name
			console.log(this.test)
		}
	}
</script>

<style>
</style>

成品展示

点击跳转后