简述uniApp 中的跳转方式 ?
在 uni-app 中,页面跳转主要通过编程式导航和声明式导航两种方式实现,配合 uni-app 提供的 API 可以轻松完成不同场景下的页面跳转需求。
编程式导航
编程式导航是通过调用 uni-app 提供的 API 在 JavaScript 代码中实现页面跳转,主要方法包括:
- uni.navigateTo({ url }):保留当前页面,跳转到应用内的某个页面,使用
uni.navigateBack()
可以返回到原页面。 -
uni.redirectTo({ url }):关闭当前页面,跳转到应用内的某个页面。
-
uni.reLaunch({ url }):关闭所有页面,打开到应用内的某个页面。
-
uni.switchTab({ url }):跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
-
uni.navigateBack({ delta }):关闭当前页面,返回上一页面或多级页面。
声明式导航
声明式导航是在模板中使用特定的组件来实现页面跳转,主要通过 <navigator>
组件实现:
<navigator url="/pages/targetPage/targetPage" open-type="navigateTo">跳转到目标页面</navigator>
<navigator>
组件的 open-type
属性决定了跳转的类型,常见的值有:
- navigateTo:保留当前页面,跳转到应用内的某个页面。
- redirectTo:关闭当前页面,跳转到应用内的某个页面。
- reLaunch:关闭所有页面,打开到应用内的某个页面。
- switchTab:跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
- navigateBack:关闭当前页面,返回上一页面或多级页面。
小程序特有的跳转方式
在 uni-app 开发小程序时,还可以使用小程序特有的跳转方式,如使用 wx.navigateToMiniProgram
API 跳转到其他小程序。
注意事项
在使用跳转功能时,需要注意跳转路径的正确性,尤其是路径的写法应符合 uni-app 的页面路径规则,通常是从项目根目录开始的绝对路径。同时,开发者需要熟悉不同跳转方式的应用场景和限制,以便在实际开发中选择最合适的跳转方式。