[每天进步一点点~] uni-app 页面跳转及传值

最新推荐文章于 2022-11-20 11:51:15 发布

拾一九

最新推荐文章于 2022-11-20 11:51:15 发布

阅读量328

点赞数 1

分类专栏： uni-app开发学习和总结文章标签： vue json md5 weex svg

本文链接：https://blog.csdn.net/DarlingYL/article/details/114525486

版权

uni-app开发学习和总结专栏收录该内容

32 篇文章 6 订阅

订阅专栏

本文介绍了在uni-app开发中使用v-for循环需要注意绑定key以避免平台间报错，以及如何正确传递和接收数组或对象的值。通过JSON.stringify和JSON.parse进行数据转换，实现在页面跳转时的参数传递，并在目标页面解析接收到的数据。示例代码展示了在index.vue、detail.vue和detail2.vue中的具体实现。

摘要由CSDN通过智能技术生成

1. v-for

在uni-app开发项目时，若使用 v-for 循环遍历数组，注意要绑定 key ，否则运行到别的平台会报错。

2.页面跳转传值(传的是数组或对象)和接收值

传值的页面，要先把值使用 JSON.stringify(值)转化后再传
接收值的页面，要先使用 JSON.parse(接收的值)转化

index.vue 文件

<template>
    <view class="content">
        <button @click="toDetail">跳到详情页1</button>
        <button @click="toDetail2">跳到详情页2</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: 2,
                infolist: {
                    name:'张三',
                    age: 18,
                    sex: '男'
                },
            }
        },
        onLoad() {

        },
        methods: {
            toDetail() {
                var list = JSON.stringify(this.infolist)
                uni.navigateTo({
                    url:'/pages/index/detail?list=' + list
                })
            },
            toDetail2() {
                uni.navigateTo({
                    url:'/pages/index/detail2?id=' + this.id
                })
            }
        }
    }
</script>

<style>
    .content {
        margin: 50px auto;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
</style>

detail.vue文件

<template>
    <view class="content">
        <view>id：{{id}}</view>
        <view>姓名：{{name}}</view>
        <view>年龄：{{age}}</view>
        <view>性别：{{sex}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                infolist: {},
                id: 1,
                name:'依依',
                age: 20,
                sex: '女',
            }
        },
        onLoad(options) {
            // console.log(options);
            this.infolist = JSON.parse(options.list)
            this.name = this.infolist.name
            this.age = this.infolist.age
            this.sex = this.infolist.sex            
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        flex-direction: column;
        
    }
</style>

detail2.vue文件

<template>
    <view class="content">
        <view>id：{{id}}</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                id: 1,
            }
        },
        onLoad(options) {
            // console.log(options);
            this.id = options.id
        }
    }
</script>

<style lang="scss" scoped>
    .content {
        display: flex;
        flex-direction: column;
        
    }
</style>