路由
框架统一管理,需要在 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"/> |