关于uni-app:uniapp页面传参非tabBar页面

40次阅读

共计 800 个字符,预计需要花费 2 分钟才能阅读完成。

uni-app 页面传参 (非 tabBar 页面)

1. 开发环境 uni-app
2. 电脑系统 windows10 专业版
3. 应用 navigator 办法进行传参, 在 template 中增加如下代码:

<navigator  :url="`../indexcon/indexcon?id=${title}`"> 去首页的详情页 </navigator>
// 留神: 在这里我应用了模板字符串的办法, 这样能够使 title 作为一个变量, 不然的话, 会被辨认为一个字符串 

4. 在 indexcon 页面中, 在 onLoad 中进行承受, 代码如下:

onLoad(options) {console.log(options);
        },
 // 应用 options 承受传递过去的参数 

5. 成果如下:

6. 然而在开发的过程中, 咱们必定不会只传一个参数, 咱们个别会传多个参数, 在这里我抉择的是, 应用对象的办法!
7. 在 template 中批改代码为:

<navigator  :url="`../indexcon/indexcon?id=${ChenindexconOnj}`"> 去首页的详情页 </navigator>

8. 在 return 中增加如下代码:

ChenindexconOnj:{
                    'id':'100',
                    'name':'chen',
                    'sex':'男',
                    'age':'23',
                },

9. 在 indexcon 输入承受到的对象, 成果如下:

 依据输入这个后果, 咱们能够得出结论, 这个办法能够辨认字符串, 解决办法如下 

10. 在 onLoad 中增加如下代码:

onLoad() {this.ChenindexconOnj=JSON.stringify(this.ChenindexconOnj);
 },
 // JSON.stringify(this.ChenindexconOnj) // 作用:把这个变量转换为字符串 

11. 再次测试, 成果如下:

12. 本期的分享到了这里就完结啦, 心愿对你有所帮忙, 让咱们一起致力走向巅峰!

正文完
 0