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

文章目录

        • 1.路由配置
        • 2.编程式导航和组件式导航
          • 组件式导航示例:index.vue
          • 回顾:vue的声明式导航和编程式导航的定义和写法区别
        • 3.使用pages.json中的tabBar进行底部选项卡的设置
          • step1:pages文件夹下新建四个选项卡文件(文件夹)
          • step2:在uniapp官网复制tabBar的配置代码
          • step3:在iconfont上找上述页面对应的四个图标
          • step4:调整tabbar的页面路径和图片路径
        • 4.【踩坑】uni.navigateTo跳转失败的可能原因以及解决方法
          • 原因一:配置在tabBar中的路径(重点)
          • 原因二:URL路径格式错误
          • 原因三:路径未配置
        • 5.路由跳转:常用的组件式跳转api
        • 6.获取当前页面栈:getCurrentPages
        • 7.路由传参和接收
          • .7.1.onLoad()的参数(比如option)是上个页面传递的数据
          • 7.2.路由传参示例
        • 8.小程序路由分包配置
          • 为什么要进行分包?
          • 什么是主包和分包?
          • 示例:创建一个分包

1.路由配置

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

{
   
	"path": "pages/index/index",
	"style": {
   
		"navigationBarTitleText": "uni-app",
		"enablePullDownRefresh":true//可以下拉
	}
}
2.编程式导航和组件式导航

编程式导航:uni.navigateTo
组件式导航:

组件式导航示例:index.vue
<view class="">
	<navigator url="/pages/404/404">返回404页面navigator>
view>
回顾:vue的声明式导航和编程式导航的定义和写法区别

你可能感兴趣的:(uni-app,uni-app,vue,小程序,组件,微信小程序)