uniapp多页面应用跳转方式知多少

2023-10-18 20:06:47

轻松解锁 uni-app 多页面应用的跳转秘诀

在 uni-app 的多页面应用开发中，页面之间的跳转是至关重要的。uni-app 提供了多种跳转方式，以满足各种场景的需求。本文将深入探索 uni-app 的页面跳转方式，让开发者掌握跳转技巧，提高开发效率。

一、uni.navigateTo()：常规跳转

uni.navigateTo() 是 uni-app 中最常用的跳转方式，可以实现页面的正常跳转。它将当前页面压入导航栈，方便后续返回。

uni.navigateTo({
  url: 'pages/detail/detail',
  success: () => {
    console.log('跳转成功');
  },
  fail: (err) => {
    console.log('跳转失败', err);
  },
});

二、uni.redirectTo()：替换跳转

uni.redirectTo() 会替换当前页面，即跳转后当前页面将被销毁，无法返回。它适用于需要清空导航栈的情况。

uni.redirectTo({
  url: 'pages/order/order',
  success: () => {
    console.log('跳转成功');
  },
  fail: (err) => {
    console.log('跳转失败', err);
  },
});

三、uni.reLaunch()：页面重载

uni.reLaunch() 将销毁当前页面，并重新加载目标页面。它适用于需要重置页面状态的情况。

uni.reLaunch({
  url: 'pages/home/home',
  success: () => {
    console.log('页面重载成功');
  },
  fail: (err) => {
    console.log('页面重载失败', err);
  },
});

四、uni.switchTab()：标签页切换

uni.switchTab() 用于在标签页之间切换。它将销毁当前页面，并加载目标页面到指定的标签页中。

uni.switchTab({
  url: 'pages/user/user',
  success: () => {
    console.log('标签页切换成功');
  },
  fail: (err) => {
    console.log('标签页切换失败', err);
  },
});