1：index.vue的页面,在按钮上绑定点击事件，将所要传递的参数放在点击事件的方法里面。
<text @click="details(item.id)"></text>
2：进入methods，将参数放在方法里面，并且在url跳转路径后面进行拼接。
details(id) { uni.navigateTo({ url: "details?id="+id, }); },
3：在pages里面新建一个details.vue页面，接收index.vue传过来的参数。
4：在onLoad里面打印一下接受到的参数
onLoad(option) { console.log(option.id) },
5：index.vue页面的参考代码
<template> <view> <view class="padding-xl" v-for="(item,index) in fenecList.fences" :key="index"> <text @click="details(item.id)">{{item.id}} {{item.name}}</text> </view> </view> </template> <script> export default { data() { return { fenecList: [], }; }, onLoad() { this.getList(); }, methods: { getList() { uni.request({ url: "../../static/test.json", method: 'get', dataType: 'json', success: (res) => { console.log(res.data); this.fenecList = res.data.info; }, }); }, details(id) { uni.navigateTo({ url: "details?id="+id, }); }, }, } </script> <style> </style>
details.vue参考的代码
<template> <view> </view> </template> <script> export default { data() { return { }; }, onLoad(option) { console.log(option.id) this.getList(option.id); }, methods: { getList(id) { uni.request({ url: "xxx", method: 'get', dataType: 'json', data: { "id":"id", }, success: (res) => { }, }); }, }, } </script> <style> </style>
test.json
{ "retCode": 1, "info": { "configName": "家庭作业", "fences": [{ "id": 1, "name": "测试区域一" },{ "id": 2, "name": "测试区域二" },{ "id": 3, "name": "测试区域三" },{ "id": 4, "name": "测试区域四" }] } }
