uni-app 页面之间的导航跳转

lbh
888 阅读3分钟

在 uni-app 中，页面之间的导航跳转有以下几种方式：

  1. uni.navigateTo(options)：保留当前页面，跳转到应用内的某个页面。调用成功后，新页面会被加入到页面栈中，可以通过 uni.navigateBack 或 uni.switchTab 来返回到原页面。options 对象参数包含：

    • url：必填，跳转的应用内非 tabBar 的页面的路径，路径后可以带参数，参数格式同 query。
    • success：可选，接口调用成功的回调函数。
    • fail：可选，接口调用失败的回调函数。
    • complete：可选，接口调用结束的回调函数。

  2. uni.redirectTo(options)：关闭当前页面，跳转到应用内的某个页面。调用成功后，新页面会替换当前页面，不需要返回到原页面。options 对象参数同 uni.navigateTo。

  3. uni.reLaunch(options)：关闭所有页面，打开应用内的某个页面。options 对象参数同 uni.navigateTo。

  4. uni.switchTab(options)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。options 对象参数包含：

    • url：必填，需要跳转的 tabBar 页面的路径，路径后不能带参数。
    • success：可选，接口调用成功的回调函数。
    • fail：可选，接口调用失败的回调函数。
    • complete：可选，接口调用结束的回调函数。

  5. uni.navigateBack(options)：关闭当前页面，返回上一页面或多级页面。options 对象参数包含：

    • delta：可选，返回的页面数，如果 delta 大于现有页面数，则返回到首页。默认值为1。
    • animation：可选，是否开启页面返回时的渐变动画。默认值为 true。
    • success：可选，接口调用成功的回调函数。
    • fail：可选，接口调用失败的回调函数。
    • complete：可选，接口调用结束的回调函数。

以上是 uni-app 中页面之间导航跳转的所有 API。利用这些 API 我们可以实现页面之间的跳转和切换。需要注意的是，页面之间跳转和切换时，要注意调用 API 的时机以及传入的参数。

在 uni-app 中比较常用的是 uni.navigateTo 和 uni.redirectTo 这两个 API 。其中，uni.navigateTo 用于保留当前页面，跳转到应用内的某个页面；而 uni.redirectTo 则用于关闭当前页面，并跳转到应用内的某个页面。

具体实现步骤如下：

  1. 在源页面中定义跳转事件处理函数，并在函数中调用 uni.navigateTo 或 uni.redirectTo API。例如，在源页面的 buttons 事件处理函数中添加如下代码：
navigateToPage: function () {
  uni.navigateTo({
    url: '/pages/target-page/target-page',
  });
},
redirectToPage: function () {
  uni.redirectTo({
    url: '/pages/target-page/target-page',
  });
},
  1. 在源页面的模板中，添加跳转按钮的 HTML 内容及事件绑定。例如，在模板中添加如下代码：
<button type="default" @click="navigateToPage">跳转到目标页面</button>
<button type="default" @click="redirectToPage">关闭当前页面并跳转到目标页面</button>
  1. 在跳转目标页面的组件中，添加和设置路由的相关代码。例如，target-page 页面的 JS 文件内容如下：
export default {
  onShow: function () {
    console.log('Target page shown!');
  },
};

这样，在点击按钮时，就可以通过 API 跳转到目标页面。注意，在使用 uni.navigateTo 跳转页面时，跳转的目标页面必须是应用内的页面，且必须在 pages 属性中声明，否则将无法跳转到该页面。同时，在跳转目标页面后，我们可以在该目标页面的生命周期钩子函数中添加自己的处理逻辑。

需要注意的是，在 uni.navigateTo 和 uni.redirectTo 跳转页面时，跳转页面的 URL 要写入相对路径，以 / 开始的路径表示相对于根目录的路径，以 ./ 或 ../ 开始的路径表示相对于当前页面的路径

avatar
文章
阅读
粉丝