小白菜笔记 uni-app(四)路由


路由

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

文章作者: April-cl
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 April-cl !
  目录