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页面传递过来的参数

相关推荐
四眼肥鱼5 小时前
全网最全的 qiankun 基于 react18+(主应用)、vue3.4+(微应用)实现页签缓存,页面缓存
前端·javascript
dorisrv5 小时前
优雅地处理前端错误边界
前端
狗哥哥5 小时前
Pinia Store 平滑迁移:用代理模式实现零风险重构
前端·架构
老前端的功夫5 小时前
前端水印技术深度解析:从基础实现到防破解方案
开发语言·前端·javascript·前端框架
霍格沃兹测试学院-小舟畅学5 小时前
性能测试入门:使用 Playwright 测量关键 Web 性能指标
开发语言·前端·php
tangbin5830855 小时前
iOS Swift 工具类:数据转换工具 ParseDataTool
前端
潜水豆5 小时前
AI 时代的前端究竟还能积累什么
前端
www_stdio5 小时前
手写 instanceof:深入理解 JavaScript 原型与继承机制
前端·javascript·html
boombb5 小时前
国际化方案:多环境、多语言、动态加载的完整实践
前端
狗哥哥5 小时前
我是如何治理一个混乱的 Pinia 状态管理系统的
前端·vue.js·架构