uniapp帶參數(shù)跳轉(zhuǎn),新頁(yè)面接收參數(shù)

1:index.vue的頁(yè)面,在按鈕上綁定點(diǎn)擊事件,將所要傳遞的參數(shù)放在點(diǎn)擊事件的方法里面。

<text @click="details(item.id)"></text>

2:進(jìn)入methods,將參數(shù)放在方法里面,并且在url跳轉(zhuǎn)路徑后面進(jìn)行拼接。

details(id) {
                uni.navigateTo({
                    url: "details?id="+id,
                });
            },

3:在pages里面新建一個(gè)details.vue頁(yè)面,接收index.vue傳過(guò)來(lái)的參數(shù)。


4:在onLoad里面打印一下接受到的參數(shù)

onLoad(option) {
            console.log(option.id)
            
        },

5:index.vue頁(yè)面的參考代碼

<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": "家庭作業(yè)",       
        "fences": [{
            "id": 1,
            "name": "測(cè)試區(qū)域一"             
        },{
            "id": 2, 
            "name": "測(cè)試區(qū)域二"             
        },{
            "id": 3, 
            "name": "測(cè)試區(qū)域三"             
        },{
            "id": 4, 
            "name": "測(cè)試區(qū)域四"             
        }]
    }
}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容