uniapp页面通信

Posted 2022-10-15 五花肉三七分

1：导航形式：

        uni.navigateTo、uni.redirectTo、uni.relaunch、uni.switchTab、uni.navigateBack

uni.navigateTo(
                url:'./home?code=1'
              )
 
//新页面接收后：
onLoad(options) 
    console.log(options)
    console.log(options.code)

<1>：问题

以url形式传的参数如果是字符串形式，那没有问题；但如果是JSON、等其他格式的就需要先转为字符串，而且url还会存在长度限制；所以我们在传参时要做处理：

encodeURIComponent(JSON.stringify(item));
JSON.parse(decodeURIComponent(option.item));

encodeURIComponent()//编码函数
dncodeURIComponent()//解码函数

2：标签形式：

<navigator :url=" './nav?code=999'>参数传递</navigator>

3：uni.$on和uni.$emit

//在子页面定义事件传参
 uni.$emit('update',content:'')

//在父页面接受参数
export default 
    onLoad() 
        uni.$on('update',function(val)
        	console.log(val.content);
    	)
    

4：uniapp依赖的vue框架带的传参方式

1：页面间通信，
2：路由传参query/params
等

5：hash路由和history路由

这里讲的不是如何传参，而是在hash路由和history路由下传参出现的问题：

1：hash 模式下，仅hash符号之前的内容会被包含在请求中，所以说你直接在浏览器url后面直接加上参数回车，请求会过滤掉hash符号#后面的参数，就会出现你明明传了参数，为什么之后拿的时候找不到的情况。

2：history模式下，前端的URL必须和实际向后端发起请求的URL一致，顾名思义使用history路由模式进行请求时，整个url都会包含在请求中。

const router = new Router(
  mode: 'history',   // 模式，默认hash
  base: '', // 基础路径
  routes: [...]
)