uniapp中tabBar页面间通过switchTab传参的两种实现方案

作者:百宝袋

时间:2026-10-31

浏览:177

uniapp官方规定switchTab跳转不支持URL传参。本文介绍两种替代方案:一是利用uni.setStorageSync将数据存入本地缓存,在目标页onShow中读取;二是通过Vue.prototype定义全局变量,在源页赋值并跳转,目标页onShow中获取。注意tabBar页面缓存机制,数据更新需置于onShow而非onLoad。

文章目录

一、需求:

在tabBar页面之间进行跳转时,需要传递特定参数。

根据官方文档说明,跳转至tabBar页面的操作必须使用uni.switchTab,且URL路径后不允许携带参数。

二、解决方法:

方法1:利用本地缓存(setStorageSync)

//index.vue 页

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

//user.vue 页(在onShow生命周期中从本地缓存读取数据,并执行相关操作)

onShow() {
  const myIndex= uni.getStorageSync('myIndex');
  console.log(myIndex)
}

方法2:使用全局变量

在main.js中定义全局变量

Vue.prototype.$name = '';

页面1:name.vue

   this.$name= "chuanzhi";
    uni.switchTab({
         url:'/pages/index/index'
    })

页面2:index.vue(注意:务必将数据更新逻辑放在onShow生命周期中,因为tabBar页面存在缓存机制,再次进入时不会触发onLoad)

onShow(){
    this.info.name =  this.$name//赋值取得参数
}

此时this.info.name即为从name.vue页面传递过来的参数值

至此,关于uniapp实现tabBar-switchTab之间传参的文章介绍完毕,更多相关uniapp tabBar-switchTab传参内容请搜索本站以前的文章或继续浏览下面的相关文章希望大家以后多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章