[每天进步一点点~] 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>