Uniapp去掉顶部导航栏和路由传参

一、去掉顶部导航栏

在pages.json中设置这两条参数"navigationStyle":"custom","titleView":false[注意层级不同]

如果想全局取消顶部导航栏,可以在page.json的globalStyle中设置:

"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "Ebook",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8",
		"navigationStyle":"custom",//只看这两条其他的不用看
		"app-plus": {
				"titleView":false//只看这两条其他的不用看
		    }
	}

如果想单独去掉一个界面的导航栏,可以在pages.json中单独在那个页面的模块中设置:

{
		"path": "pages/index/index",
		"style": {
			"navigationBarTitleText": "Ebook",
			"navigationStyle":"custom"//只看这两条,其他不用看
		},
		"app-plus": {
				"titleView":false//只看这两条,其他不用看
		    }
	}

二、路由传参

提供两种思路:(1)使用vuex传参(2)导航url后面拼接参数

(1)使用vuex传参

html:

<template>
	<view @click="openContent">跳转</view>
</template>

<script>
 	export default {
        data(){
            return{
                message:1            
            }    
        }
		methods:{
			openContent(item){
				this.$store.state.contents = this.message
				uni.navigateTo({
				  	url: `/pages/contents/contents`//你写好的路由地址
				});
			}
		},
	}
</script>

<style>

</style>

vuex:

import Vue from 'vue'
import Vuex from 'vuex'


Vue.use(Vuex)

const store = new Vuex.Store({
    state: {
		contents:''
	},
})
export default store

导航到的页面:

<template>
	<view>
		<view>{{contents}}</view>
	</view>
</template>

<script>
export default{
	name:'contents',
	data(){
		return{
			contents:''
		}
	},
	onLoad: function () {
		this.contents = this.$store.state.contents//获取参数
	}
}
</script>

<style scoped>
	
</style>

(2)导航url后面拼接参数[这种方法要区分传参类型]

如果传递字符、数字类型、可以直接拼接

js:

<template>
	<view @click="openContent">跳转</view>
</template>

<script>
 	export default {
        data(){
            return{
                message:1            
            }    
        }
		methods:{
			openContent(item){
				uni.navigateTo({
				  	url: `/pages/contents/contents?message=` + this.message//拼接message
				});
			}
		},
	}
</script>

<style>

</style>

导航到的页面:

<template>
	<view>
		<view>{{contents}}</view>
	</view>
</template>

<script>
export default{
	name:'contents',
	data(){
		return{
			contents:''
		}
	},
	onLoad: function (option) {
        console.log(option.message)//option.'你起的参数名'
		this.contents  = option.message
        console.log(this.contents)
	}
}
</script>

<style scoped>
	
</style>

如果想要传递对象,需要先将对象转化为数组,导航到的页面收到参数后再转化为对象。

具体例子为:

js:

<template>
	<view @click="openContent">跳转</view>
</template>

<script>
 	export default {
        data(){
            return{
                message:[
                      {
                       id:1,
                       name:''bob' 
                    }    
                ]            
            }    
        }
		methods:{
			openContent(item){
				uni.navigateTo({
				  	url: `/pages/contents/contents?message=` + JSON.stringify(this.message)//参数以数组形式传递
				});
			}
		},
	}
</script>

<style>

</style>

导航到的页面:

<template>
	<view>
		<view>{{contents}}</view>
	</view>
</template>

<script>
export default{
	name:'contents',
	data(){
		return{
			contents:''
		}
	},
	onLoad: function (option) {
        console.log(option.message)
	}
}
</script>

<style scoped>
	
</style>

打印结果为:

 但是形式却不是对象,打印option.message[0].id或者option.message[0].name会显示undefined

需要将数组转化为对象,正确格式是这样的:

<template>
	<view>
		<view>{{contents}}</view>
	</view>
</template>

<script>
export default{
	name:'contents',
	data(){
		return{
			contents:''
		}
	},
	onLoad: function (option) {
        this.contents  = JSON.parse(option.message[0].id)//使用JSON.parse将数组转换为对象
        console.log(this.contents)
	}
}
</script>

<style scoped>
	
</style>

这样传参就结束了

推荐多练习第二种,但是第二种可能会产生很多麻烦,例如对象转化成数组正常,但是再转化为对象时出错:

 这都是不能修改的错误,可以用第二种方法练练手,出错了就用第一种方法。

分割线


发现了路由传参不报转化失败错误的方法:

//需要参数的界面

onLoad: function (option) {
			const item = JSON.parse(decodeURIComponent(option.item));
		    this.userInfo = item
			console.log(this.userInfo)
		}


//传递参数的界面
infoSearch() {
				let item = encodeURIComponent(JSON.stringify(this.userInfo))
				uni.navigateTo({
					url: '/pages/user/userInfo/userInfo?item=' + item
				});
			},

用了个encodeURIComponent()把对象参数包起来传递。

  • 5
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值