uniapp页面通信

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: [...]
})

猜你喜欢

转载自blog.csdn.net/m0_50789201/article/details/126785070