笔记大全

uniapp跳转页面传大量参数

更新时间：2023-12-14

前言

在开发uniapp应用时，经常需要跨页面传递参数，特别是当需要传递大量参数时，采用传统的一一传递的方式显得非常麻烦，这时候就要考虑使用其他的方式来传递参数。

第一种方式：使用queryString

使用queryString是一种比较简单的方式，在跳转时用“？”将参数与URL隔开，将参数以键值对的形式拼接在URL之后，具体代码如下：

    
    uni.navigateTo({
      url: '/pages/pageB/pageB?param1=value1¶m2=value2¶m3=value3'
    })

    
    onLoad(options){
      console.log(options.param1)
      console.log(options.param2)
      console.log(options.param3)
    }

第二种方式：使用URLSearchParams

使用URLSearchParams是一种比较新的方式，在跳转时可以使用URLSearchParams API将参数以对象的形式传递给URL，并且可以使用URLSearchParams API从URL中获取参数，具体代码如下：

    
    let params=new URLSearchParams();
    params.append('param1', 'value1');
    params.append('param2', 'value2');
    params.append('param3', 'value3');
    uni.navigateTo({
      url: '/pages/pageB/pageB?' + params.toString()
    })

    
    onLoad(){
      let params=new URLSearchParams(this.$route.query);
      console.log(params.get('param1'));
      console.log(params.get('param2'));
      console.log(params.get('param3'));
    }

第三种方式：使用本地存储

当需要传递的参数非常大时，可以使用本地存储的方式，在页面A中将参数存储到本地存储中，然后在页面B中获取，具体代码如下：

    
    uni.setStorageSync('data', {param1: value1, param2: value2, ...});
    uni.navigateTo({
      url: '/pages/pageB/pageB'
    })

    
    onLoad(){
      let data=uni.getStorageSync('data');
      console.log(data.param1);
      console.log(data.param2);
      ...
    }
    onUnload(){
      uni.removeStorageSync('data');
    }

第四种方式：使用Vuex

Vuex是uniapp中的状态管理工具，可以在全局中管理应用的状态，包括跨页面传递数据。当需要传递的参数在多个页面间共享时，可以使用Vuex，在页面A中将参数存储到Vuex中，在页面B中获取。具体代码如下：

    
    this.$store.commit('setData', {param1: value1, param2: value2, ...});
    uni.navigateTo({
      url: '/pages/pageB/pageB'
    })

    
    onLoad(){
      console.log(this.$store.state.param1);
      console.log(this.$store.state.param2);
      ...
    }

总结

在uniapp中，跨页面传递参数有多种方式，我们可以根据需求来选择。使用queryString、URLSearchParams、本地存储和Vuex都是比较常见的方式，需要在实际开发中灵活运用。

c语言编程笔录