2022-09-07 uni-app学习笔记(四) uni-app路由配置和页面跳转,uni.navigateTo跳转失败的可能原因以及解决方法

1.路由配置

uniapp页面全部交给框架统一处理,开发者需要在pages.json里配置每个路由页面的路径和页面样式
(类似于小程序在app.json中配置路由)
如:

{
   
	"path": "pages/index/index",
	"style": {
   
		"navigationBarTitleText": "uni-app",
		"enablePullDownRefresh":true//可以下拉
	}
}

2.编程式导航和组件式导航

编程式导航:uni.navigateTo
组件式导航:<navigator></navigator>

组件式导航示例:index.vue

<view class="">
	<navigator url="/pages/404/404">返回404页面</navigator>
</view>

回顾:vue的声明式导航和编程式导航的定义和写法区别

2022-10-25 vue的声明式导航和编程式导航的定义和写法区别

3.使用pages.json中的tabBar进行底部选项卡的设置

step1:pages文件夹下新建四个选项卡文件(文件夹)

• index(首页,已存在),
• list(通讯录页),
• finder(发现页),
• center(个人中心页),

随便写点东西,保存后在pages.json的"pages"数组中生成相应路径

step2:在uniapp官网复制tabBar的配置代码

官网位置:https://uniapp.dcloud.net.cn/collocation/pages.html#配置项列表
把"tabBar": {...}粘贴进pages.json

step3:在iconfont上找上述页面对应的四个图标

每个图标分成未选择的和已选择的颜色,所以将会下载8张png,统一放进新建文件夹tabbarIcon中,并将此文件夹放到uniapp项目的static文件夹下

step4:调整tabbar的页面路径和图片路径

代码如下

"tabBar": {