uni-app开发日志[2021091401]：navigator如何在url里加上参数

1、在navigator的url中直球对决

url中加参数，这里举个例子，适用大部分情况，注意url前的冒号:，url中双引号"和单引号'的用法。

<view v-for="(item,index) in listOrder">
	<navigator :url="'/pages/show?category='+model.category+'&id='+item.id">{{item.name}}</navigator>
</view>
<script>
export default {
	data() {
		return {
			model: {
				category:'T1'
			},
			listOrder:{
				{id:1,name:'测试'},
				{id:2,name:'demo'},
			}
		}
	}
}
</script>

2、借用函数弯道超车

除了直接在组件navigator中写路径及参数，也可以用函数。将参数放入函数中，格式符合js要求就行了

<view v-for="(item,index) in listOrder">
	<view @click="redirectUrl(item.id)">{{item.name}}</view>
</view>
<script>
export default {
	data() {
		return {
			model: {
				category:'T1'
			},
			listOrder:{
				{id:1,name:'测试'},
				{id:2,name:'demo'},
			}
		}
	},
	methods: {
	    redirectUrl:function(id){
	        uni.navigateTo({
	            url: '/pages/show?category='+this.model.category+'&id='+id
	        });
	    },
	}
}

3、字符串和编码双管齐下

navigaor组件传递对象时如果不使用JSON.stringify将其字符串化，那么对象会以[object,object]形式被接收，但字符串化又可能超出规定的长度，怎么解决呢？参考如下方法：

1. 传递页面中用encodeURIComponent结合JSON.stringify()方法将对象字符串化和编码，这样便限制了url参数的长度

<navigator :url="'/pages/show?param='+ encodeURIComponent(JSON.stringify(param))"></navigator>

2. 接收页面用JSON.parse()以及decodeURIComponent()对象化并解码。

onLoad(option){
	const param = JSON.parse(decodeURIComponent(option.param));
}

这样就解决了传递的对象和超长问题。

微信支付中的返回地址redirect_url也使用了该方法，参考：《微信开发 ━━ 微信商户v3微信支付H5方式开发之php篇》第六点。