uniapp 实现tabBar-switchTab之间的传参

一、需求:

tabbar之间跳转页面时,需要传递一个参数。

官方文档明确说明: 跳转tabBar栏的页面只能使用 uni.switchTab 并且url 路径后面不能传递参数。

二、解决方法:

方法1:setStorageSync(本地缓存)

//index.vue

c 复制代码
onclick () {
    存起来,在另一个页面中获取.
    uni.setStorageSync('myIndex', value);
    uni.switchTab({
            url:'/pages/user/user'
      })
}

//user.vue 页(在onShow中从本地缓存中获取出来,进行相关操作)

c 复制代码
onShow() {
  const myIndex= uni.getStorageSync('myIndex');
  console.log(myIndex)
}

方法2:使用全局变量:

main.js 定义全局变量

c 复制代码
Vue.prototype.$name = '';

页面1: name.vue

c 复制代码
   this.$name= "chuanzhi";

    uni.switchTab({
         url:'/pages/index/index'
    })

页面2:index.vue

(注意一定要放在onShow生命周期里面及时更新数据,因为tabBar会有缓存机制此时再次进入页面onLoad不会执行)

c 复制代码
onShow(){

    this.info.name =  this.$name//赋值取得参数

}

此时this.info.name 就是name.vue页面传递过来的参数

相关推荐
小桥风满袖几秒前
Three.js-硬要自学系列30之专项学习环境光
前端·css·three.js
Luckyfif3 分钟前
🤯由 性能指标 散发开来的 Performance API 被问爆了呀
前端·面试·性能优化
咸虾米6 分钟前
在uniCloud云对象内使用unipay的微信退款出现错误“uniPayCo.refund Error: token校验未通过”的解决方案
前端·后端
前端Hardy12 分钟前
HTML&CSS:产品卡片动画效果
前端·javascript
货拉拉技术18 分钟前
货拉拉开源:鸿蒙路由 TheRouter
android·前端·harmonyos
中杯可乐多加冰20 分钟前
工业4.0数字孪生新引擎:星图云开发者平台全景评测
前端·低代码·掘金·金石计划
云边小卖铺.27 分钟前
运行vue项目报错 errors and 0 warnings potentially fixable with the `--fix` option.
前端·javascript·vue.js
我是若尘28 分钟前
前端处理大量并发请求的实用技巧
前端
Lstmxx29 分钟前
Electron:使用数据流的形式加载本地视频
前端·electron·node.js
JunjunZ37 分钟前
unibest框架开发uniapp项目:兼容小程序问题
前端·vue.js