uni-app学习笔记二十--pages.json页面路由pages设置

uni-app 通过 pages 节点配置应用由哪些页面组成，pages 节点接收一个数组，数组每个项都是一个对象，其属性值如下：

属性	类型	默认值	描述
path	String		配置页面路径
style	Object		配置页面窗口表现，配置项参考下方 pageStyle
needLogin	Boolean	false	是否需要登录才可访问

 Tips：

• pages节点的第一项为应用入口页（即首页）
• 应用中新增/减少页面，都需要对 pages 数组进行修改
• 文件名不需要写后缀，框架会自动寻找路径下的页面资源

style

用于设置每个页面的状态栏、导航条、标题、窗口背景色等。这里重点说一下navigationStyle

navigationStyle

String

default

导航栏样式，仅支持 default/custom。custom即取消默认的原生导航栏，需看使用注意

uni-app中的页面，默认保存在工程根目录下的pages目录下。

新建页面

每次新建页面，均需在pages.json中配置pages列表；未在pages.json -> pages 中注册的页面，uni-app会在编译阶段进行忽略。

删除页面

删除页面时，需做两件工作：

• 删除.vue文件、.nvue、.uvue文件
• 删除pages.json -> pages列表项中的配置 （如使用HBuilderX删除页面，会在状态栏提醒删除pages.json对应内容，点击后会打开pages.json并定位到相关配置项）

示例代码：

	"pages": [ //pages数组中第一项表示应用启动页{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}},{"path" : "pages/classfy/classfy","style" : {"navigationBarTitleText" : "分类","navigationBarBackgroundColor": "#F2E6DE","navigationBarTextStyle": "black","enablePullDownRefresh": true}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "个人中心"}}]

 注意：如果page里style配置跟上一篇提到的globalStyle配置了同样的属性，那么该页面的样式最终会以page里style为准。可以根据开发实际需要灵活选择使用全局配置，还是页面自定义配置。

自定义导航栏使用注意

当navigationStyle设为custom或titleNView设为false时，原生导航栏不显示，此时要注意几个问题：

• 非H5端，手机顶部状态栏区域会被页面内容覆盖。这是因为窗体是沉浸式的原因，即全屏可写内容。uni-app提供了状态栏高度的css变量--status-bar-height，如果需要把状态栏的位置从前景部分让出来，可写一个占位div，高度设为css变量。

关于路由配置更多信息，详见官方文档pages.json 页面路由 | uni-app官网