一、去掉顶部导航栏
在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()把对象参数包起来传递。