uniapp页面动态传参，及接收参数

1：index.vue的页面,在按钮上绑定点击事件，将所要传递的参数放在点击事件的方法里面。

<text @click=“details(item.id)”>
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>