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()把对象参数包起来传递。