1.配置tab
在pages文件夹下新增两个文件夹
在pages.json中配置路径:
"pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "我的" } }, { "path": "pages/class/class", "style": { "navigationBarTitleText": "登录" } }, ],
pages.json文件增加tabBar配置(和pages在同一层级):
// tabBar 配置 "tabBar": { "color": "#7A7E83", "selectedColor": "red", "borderStyle": "black", "backgroundColor": "#ffffff", "list": [{ "pagePath": "pages/index/index", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "登陆" }, { "pagePath": "pages/class/class", "iconPath": "static/logo.png", "selectedIconPath": "static/logo.png", "text": "我的" }] },
2. uniapp中的路由管理
uni-app
路由全部交给框架统一管理,开发者需要在pages.json里配置每个路由页面的路径及页面样式,不支持 Vue Router
。
所以新增的页面需要现在pages.json中配置相应路径才可以访问
3. uniapp中的路由跳转
配置了tab的页面可以直接通过点击tab项来跳转
非tab页面的路由跳转有两种方式,详见文档:https://uniapp.dcloud.io/frame?id=%e8%b7%af%e7%94%b1%e8%b7%b3%e8%bd%ac
uni-app
有两种页面路由跳转方式:使用navigator组件跳转、调用API跳转
类似于vue中的<router to="url"></router>
和this.router.push(url: "")