简述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 的页面路径规则,通常是从项目根目录开始的绝对路径。同时,开发者需要熟悉不同跳转方式的应用场景和限制,以便在实际开发中选择最合适的跳转方式。

发表评论

后才能评论