路由
框架统一管理,需要在 pages.json 里配置每个路由页面的路径及页面样式。
路由跳转
使用 navigator 组件跳转
类似 HTML 中的 <a>
组件,但只能跳转本地页面。目标页面必须在 pages.json 中注册。
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
url | String | 应用内的跳转链接,值为相对路径或绝对路径,注意不能加 .vue 后缀 |
|
open-type | String | navigate | 跳转方式,有效值:navigate、redirect、switchTab、reLaunch、navigateBack、exit |
delta | Number | 当 open-type 为 ‘navigateBack’ 时有效,表示回退的层数 | |
animation-type | String | pop-in/out | 当 open-type 为 navigate、navigateBack 时有效,窗口的显示/关闭动画效果 |
animation-duration | Number | 300 | 当 open-type 为 navigate、navigateBack 时有效,窗口显示/关闭动画的持续时间。 |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class=”none”时,没有点击态效果 |
hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 |
hover-stay-time | Number | 600 | 手指松开后点击态保留时间,单位毫秒 |
target | String | self | 在哪个小程序目标上发生跳转,默认当前小程序,值域self/miniProgram |
调用 API 跳转
API | 说明 |
---|---|
uni.navigateTo | 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面,相当于 open-type=”navigate” |
uni.redirectTo | 关闭当前页面,跳转到应用内的某个页面,相当于 open-type=”redirect” |
uni.reLaunch | 关闭所有页面,打开到应用内的某个页面,相当于 open-type=”reLaunch” |
uni.switchTab | 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面,相当于 open-type=”switchTab” |
uni.navigateBack | 关闭当前页面,返回上一页面或多级页面,相当于 open-type=”navigateBack” |
页面栈
框架以栈的形式管理当前所有页面, 当发生路由切换的时候,页面栈的表现如下:
由方式 | 页面栈表现 | 触发时机 |
---|---|---|
初始化 | 新页面入栈 | uni-app 打开的第一个页面 |
打开新页面 | 新页面入栈 | 调用 API uni.navigateTo 、使用组件 <navigator open-type="navigator"/> |
页面重定向 | 当前页面出栈,新页面入栈 | 调用 API uni.redirectTo 、使用组件 <navigator open-type="redirect"/> |
页面返回 | 页面不断出栈,直到目标返回页 | 调用 API uni.navigateBack 、使用组件 <navigator open-type="navigateBack"/> 、用户按左上角返回按钮、安卓用户点击物理back按键 |
Tab 切换 | 页面全部出栈,只留下新的 Tab 页面 | 调用 API uni.switchTab 、使用组件 <navigator open-type="switchTab"/> 、用户切换 Tab |
重加载 | 页面全部出栈,只留下新的页面 | 调用 API uni.reLaunch 、使用组件 <navigator open-type="reLaunch"/> |