uniapp带参数跳转,新页面接收参数

简介: uniapp带参数跳转,新页面接收参数

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": "测试区域四"             
        }]
    }
}
目录
打赏
0
0
0
0
10
分享
相关文章
|
5月前
|
API
uniapp使用路由名称跳转
【9月更文挑战第11天】在UniApp中,可通过定义路由名称实现页面跳转,需在`pages.json`中设置页面的`name`属性。使用`uni.navigateTo`等API并指定名称即可跳转,例如`name: &#39;detailPage&#39;`。目标页面可在`onLoad`函数中获取传递的参数,这种方式使代码更清晰且便于维护,尤其适合大型项目。
147 1
低代码可视化-uniapp购物车页面-代码生成器
低代码可视化-uniapp购物车页面-代码生成器
91 1
uniapp内置组件uni.navigateTo跳转后页面空白问题解决
【7月更文挑战第1天】uniapp内置组件uni.navigateTo跳转后页面空白问题解决
214 4
|
7月前
|
uniapp 添加分包页面,配置分包预下载
uniapp 添加分包页面,配置分包预下载
131 2
|
7月前
|
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
uniapp如何隐藏默认的页面头部导航栏,uniapp开发小程序如何隐藏默认的页面头部导航栏
759 0
uniapp中nvue页面如何全屏,map组件如何全屏?
uniapp中nvue页面如何全屏,map组件如何全屏?
439 3
基于jeecgboot的flowable为uniapp适配的流程页面调整
基于jeecgboot的flowable为uniapp适配的流程页面调整
196 0
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
161 7
基于SpringBoot+Vue+uniapp的房屋租赁App的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的汉服交易小程序的详细设计和实现(源码+lw+部署文档+讲解等)
91 7
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的宠物医院微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
117 7

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等