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

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>

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。