uni-app
页面路由为框架统一管理,需要在 pages.json
里配置每个路由页面的路径和页面样式。(类似的小程序在 app.json
中配置页面路由相同)uni-app
的路由用法与 Vue Router
不同。
uni-app
有两种页面路由重定向方式:
navigator
导航器组件扩展;框架以栈的形式管理当前所有页面,当发生路由切换的时候,页面栈的表现如下表:
路由方式 | 页面栈表现 | 触发时机 |
---|---|---|
初始化 | 新页面入栈 | uni-app 打开的第一个页面 |
打开新页面 | 新页面入栈 | 调用API uni.navigateTo ,使用组件 |
页面重定向 | 当前页面出栈,新页面入栈 | 调用API uni.redirectTo ,使用组件 |
页面返回 | 页面不断出栈,直到目标返回页 | 调用API uni.navigateBack ,使用组件 |
Tab标签切换 | 页面全部出栈,只留下新的标签页面 | 调用API uni.switchTab ,使用组件 |
重加载 | 页面全部出栈,只留下新的页面 | 调用API uni.reLaunch ,使用组件 |
其实,路径不需要手动去一个一个写,在 pages
右键新建页面:
直接点击新建页面,输入页面名称,会直接创建一个包含框架的新页面,如下:
会自动在 pages.json
中写入路径:
{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "uni-app"}} ,{"path" : "pages/chart/chart","style" : {"navigationBarTitleText": "","enablePullDownRefresh": false}}],"globalStyle": {"navigationBarTextStyle": "black","navigationBarTitleText": "uni-app","navigationBarBackgroundColor": "#F8F8F8","backgroundColor": "#F8F8F8","app-plus": {"background": "#efeff4"}}
}
配置好了,就可以开始写页面了。
删除页面时,需做两件工作:
.vue
文件或 .nvue
文件pages.json -> pages
列表项中的配置下一篇: 非主流唯美伤感句子