05 uniapp配置page.json以及路由的跳转

最新推荐文章于 2025-06-16 12:21:39 发布

＆Ever 〗

最新推荐文章于 2025-06-16 12:21:39 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： UNI 文章标签： vue.js

本文链接：https://blog.csdn.net/qq_49104166/article/details/111593635

UNI 专栏收录该内容

8 篇文章

订阅专栏

本文详细介绍了在uniapp中如何配置page.json以设置顶部和底部tabbar，并探讨了路由跳转的方法，特别强调了在主页和TabBar页面之间跳转时应注意使用绝对路径，以及不同open-type属性在跳转中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在page.json里面配置顶部和底部tabbar

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页"
			}
		},
		{
			"path": "pages/news/news",
			"style": {
				"navigationBarTitleText": "新闻"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#007AFF",
		"backgroundColor": "#007AFF",
		"enablePullDownRefresh":true//全局下拉刷新
		
	},
	"tabBar": {
	        "color": "#7A7E83",//默认字体颜色
	        "selectedColor": "#3cc51f",//选中颜色
	        "borderStyle": "black",//边框线
	        "backgroundColor": "#ffffff",//背景颜色
	        "height": "50px",//高
	        "fontSize": "10px",
	        "iconWidth": "24px",
	        "spacing": "3px",
	        "list": [{
	            "pagePath": "pages/index/index",
	            "text": "首页"
	        }, {
	            "pagePath": "pages/news/news",
	            "text": "新闻"
	        }],
	        "midButton": {
	            "width": "80px",
	            "height": "50px",
	            "text": "文字"
	        }
	    },
	"condition" : { //模式配置，仅开发期间生效(启动配置)
		"current": 0, //当前激活的模式(list 的索引项)
		"list": [
			{
				"name": "", //模式名称
				"path": "", //启动页面，必选
				"query": "" //启动参数，在页面的onLoad函数里面得到
			}
		]
	}
}

路由的跳转因为用的是小程序里面的一些东西，路由和小程序里面相似。
主页之间跳转需要注意的地方：（尽量不要用相对路径,使用绝对路径）
TabBar页面之间跳转使用属性：open-type：switchTab跳转。
open-type=“navigate”：非tabBar页面跳转