uniapp---傳參(對象)--web-view

1.index.vue

<template>
    <view class="content">
        <view class="text-area">
            <view class="top">本頁面為index</view>
            <view class="mid">跳轉信息頁面（帶參數）參數類型為對象數組info</view>
            <view class="bot" @click="go_info_json">點擊跳轉到信息頁面info</view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: [{
                        id: 1,
                        name: 'uniapp',
                        url: 'https://uniapp.dcloud.io/'
                    },
                    {
                        id: 2,
                        name: '微信開放文檔',
                        url: 'https://developers.weixin.qq.com/doc/'
                    },
                    {
                        id: 3,
                        name: 'vue',
                        url: 'https://cn.vuejs.org/'
                    }
                ]
            }
        },
        onLoad() {

        },
        methods: {
            go_info_json() {
                console.log(this.info);
                var info = JSON.stringify(this.info);
                uni.navigateTo({
                    url: '../info/info?info=' + info
                })

            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-area>view {
        margin-top: 20rpx;
        text-align: center;
        border: 1rpx solid #4CD964;
        font-size: 20rpx;
        padding: 20rpx;
    }
</style>

2.info.vue

<template>
    <view class="content">
        <view class="text-area">
            <view class="item" v-for="(item,index) in info" :key="index">
                <text class="name">{{item.id}}.{{item.name}}</text>
                <text class="url" @click="itemClick(item.url)">{{item.url}}</text>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                info: []
            }
        },
        methods: {
            itemClick(data) {
                uni.navigateTo({
                    url: '../webview/webview?url=' + data
                })
            }
        },
        onLoad(options) {
            // console.log(options.info);
            if (options) {
                this.info = JSON.parse(options.info);
                console.log(this.info)
            }
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .text-area {
        padding: 40rpx;
    }

    .item {
        display: flex;
        flex-direction: column;
        margin-top: 20rpx;
    }

    .item .name {
        font-family: Georgia, 'Times New Roman', Times, serif;
    }

    .item .url {
        color: #007AFF;
        margin-top: 20rpx;
        padding-bottom: 20rpx;
        border-bottom: 1rpx solid #4CD964;
    }
</style>

3.webview.vue

<template>
    <view class="content">
        <web-view :src="url"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                url: ''
            }
        },
        methods: {

        },
        onLoad(options) {
            // console.log(options);
            this.url = options.url;
        }
    }
</script>

<style>
    .content {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }
</style>