揭秘uniapp导航神技：活用4大方法，轻松掌控页面跳转！

前端

2023-07-07 22:05:18

uniapp 导航指南：巧用技巧，纵横江湖

navigator：稳健前行，步步为营

在 uniapp 的导航江湖中，navigator 堪称一位经验丰富的导游，带领你稳健前行，层层递进，逐步探索页面跳转的奥秘。它就像一个忠实的小帮手，带着你一步一步地探索未知，让你从容应对页面之间的切换。

redirectTo：果断决绝，一往无前

如果你需要果断地切换页面，不让用户回头，那就要请出 redirectTo 这员大将了。它就像一位雷厉风行的将军，挥师而下，关闭当前页面，让新页面独占舞台。此去经年，再无回头路。

reLaunch：重整旗鼓，焕然一新

当你想重置页面，开启一段新的征程时，reLaunch 就是你的不二之选。它就像按下了一键清除按钮，让当前页面及其父页面统统消失，一切归零，焕然一新。

switchTap：灵活切换，纵横捭阖

如果你需要在多个页面之间来回切换，灵活自如地展示不同内容，那 switchTap 就是你的最佳选择。它就像舞台上的演员轮番登场，让不同页面交替展现，纵横捭阖，精彩纷呈。

活用技巧，纵横驰骋

掌握了这些导航剑客的绝技，你已经具备了纵横 uniapp 的基本能力。但要想成为真正的 master，还需要活用技巧，让你的页面跳转更加灵活自如。

巧用 getCurrentPages，跨页数据传递

getCurrentPages() 是一个神奇的函数，它可以获取当前的页面栈，就像一个盒子，里面存放着所有已打开的页面。你可以通过 setData() 函数修改页面实例中的 data 属性值，然后使用 navigateBack() 返回原页面，再去获取这个页面实例，获取其中的 data 属性值，这样就可以实现跨页数据传递了。

活用 navigateBack，轻松返回上一页

navigateBack() 是页面返回的利器，它能让你轻松回到上一页，就好像时光倒流一般。当你想返回上一页时，只需要使用 navigateBack()，当前页面就会关闭，上一个页面就会重新出现，一切回到原点。

代码示例：

// 使用 navigator 跳转到新页面
uni.navigateTo({
  url: '/pages/index/index'
});

// 使用 redirectTo 跳转到新页面，关闭当前页面
uni.redirectTo({
  url: '/pages/index/index'
});

// 使用 reLaunch 跳转到新页面，关闭当前页面及其父页面
uni.reLaunch({
  url: '/pages/index/index'
});

// 使用 switchTap 切换到新页面，隐藏当前页面
uni.switchTab({
  url: '/pages/index/index'
});

// 使用 getCurrentPages 获取当前页面栈
const pages = getCurrentPages();

// 使用 setData 修改页面实例中的 data 属性值
pages[pages.length - 1].setData({
  count: 10
});

// 使用 navigateBack 返回上一页
uni.navigateBack();

// 使用 navigateBack 返回上一页，并获取上一页的页面实例
uni.navigateBack({
  delta: 1,
  success: (res) => {
    const pages = getCurrentPages();
    const page = pages[pages.length - 1];
    console.log(page.data.count);
  }
});