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>