位置: IT常识 - 正文
uniapp之路由中携带参数跳转(uniapp h5路由模式)
编辑：rootadmin目录
前言
一 路由跳转方式
1. 直接在 template中定义
2.直接在methods中定义
二 携带参数
1.在template中定义
2.在methods里定义
3.+ 拼接
推荐整理分享uniapp之路由中携带参数跳转(uniapp h5路由模式)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:uniapp获取路由参数,uniapp route,uniapp router,uni-app路由,uniapp路由嵌套,uni-app路由,uniapp路由嵌套,uniapp获取路由参数,内容如对您有帮助，希望把文章链接给更多的朋友！
4.报错
前言在我们写 uniapp 小程序时，时常遇到的就是路由携带参数进行跳转，这项功能似乎已成家常便饭一样，总是能遇到，虽说官网里面有吧，但这边呢，我还是决定写篇文章记录总结下，以便时间长了忘记了。先分析路由跳转的几种方式，在介绍怎么携带吧
话不多说，直接开干
一 路由跳转方式1. 直接在 template中定义直接在绑定事件后面携带自己要跳转的路径
<view class="content-item" @click="goplateNum('/subpkg/myAllList/plateNum')"></view>methods中 goplateNum(url) { uni.navigateTo({ url: url }) },2.直接在methods中定义在methods中URL 定义跳转路径
<view class="content-item" @click="goBalance"> </view>methods goBalance() { uni.navigateTo({ url: '/subpkg/myAllList/balance' }) },怎么说，一个是作为参数，另一个直接使用，这两种都可以实现。看自己喜欢就写哪种吧，两个都写也可以 ，既然路由跳转也这两种，那么携带参数的话，也对应上面的介绍
二 携带参数1.在template中定义
实话实说，第一种我不曾用过，因为携带参数跳转有时要传递很多数据，那肯定是要使用（encodeURIComponent）对参数进行编码，这样就会显得template代码用起来有点过多，我不太喜欢。至于这个方法，我是在官网里看到的，
就是直接在
<view class="content-item" @click="goplateNum('/subpkg/myAllList/plateNum')"></view>item的话是 前面 v-for循环 数组中的item项
/subpkg/myAllList/plateNum?item=${encodeURIComponent(JSON.stringify(item))
接收的话，是需要的页面的onload里面定义
onLoad(option) { // 接收传递的参数 const item = JSON.parse(decodeURIComponent(option.item)); console.log('上一个页面传递过来的参数', 'item'); }2.在methods里定义 <view @click="GoService(item)">{{item.stationName}}</view>methods中定义 GoService(item) { uni.navigateTo({ url: `/subpkg/service/service?item=${encodeURIComponent(JSON.stringify(item))}` }) }, 3.+ 拼接let items = encodeURIComponent(JSON.stringify(index)); console.log(items) uni.navigateTo({ url: '../AddAddress/index?itemlist=' + items, })接收页面onLoad(e) { console.log(e) let obj = e.itemlist.replace("\"([^\"]*)\"", "$1"); this.list = JSON.parse(obj) console.log(this.list) },4.会报 在位置0的JSON中意外的令牌u“SyntaxError: Unexpected token u in JSON at position 0”
翻译过来就是 “SyntaxError:在位置0的JSON中意外的令牌u”
解决办法在接收参数的那个页面里
const connectorList = JSON.parse(decodeURIComponent(option.connectorList ? option.connectorList : '{}'));写个 三元表达式
参数 ？ 参数 ： ‘{ }’ 最后的 { } 可以改为 【 】
下一篇：目标检测论文解读复现【NO.21】基于改进YOLOv7的小目标检测(目标检测论文解析怎么写)
