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]
形式被接收,但字符串化又可能超出规定的长度,怎么解决呢?参考如下方法:
- 传递页面中用
encodeURIComponent
结合JSON.stringify()
方法将对象字符串化和编码,这样便限制了url参数的长度
<navigator :url="'/pages/show?param='+ encodeURIComponent(JSON.stringify(param))"></navigator>
- 接收页面用
JSON.parse()
以及decodeURIComponent()
对象化并解码。
onLoad(option){
const param = JSON.parse(decodeURIComponent(option.param));
}
这样就解决了传递的对象和超长问题。
微信支付中的返回地址redirect_url
也使用了该方法,参考:《微信开发 ━━ 微信商户v3微信支付H5方式开发之php篇》第六点。