简述uniApp 中的跳转方式？

八股文_UniApp面试题 0 114

参考回答：

在 UniApp 中，跳转方式主要有以下几种，用于页面之间的跳转和传递参数：

uni.navigateTo：保留当前页面，跳转到应用内的某个页面。
- 用于打开一个新页面，并保留当前页面，可以通过后退操作返回到当前页面。
- 示例：
```
uni.navigateTo({
url: '/pages/details/details?id=123'
});
```
uni.redirectTo：关闭当前页面，跳转到应用内的某个页面。
- 与 uni.navigateTo 不同，uni.redirectTo 会关闭当前页面，跳转到目标页面。适用于不需要返回到当前页面的场景。
- 示例：
```
uni.redirectTo({
url: '/pages/details/details?id=123'
});
```
uni.reLaunch：关闭所有页面，跳转到应用内的某个页面。
- 会关闭所有页面并重新打开一个新页面，适用于重启应用或进行页面跳转时的需求。
- 示例：
```
uni.reLaunch({
url: '/pages/home/home'
});
```
uni.switchTab：跳转到 tabBar 页面，并关闭其他页面。
- 用于跳转到 tabBar 页面，且会关闭其他页面。通常用于底部导航栏的页面跳转。
- 示例：
```
uni.switchTab({
url: '/pages/home/home'
});
```
uni.navigateBack：返回上一页面。
- 用于从当前页面返回到上一个页面，通常用于页面栈中的前进与后退。
- 示例：
```
uni.navigateBack({
delta: 1 // 返回上一个页面
});
```
uni.getCurrentPages：获取当前页面栈。
- 获取当前页面栈的信息，可以用来判断当前页面的数量和进行条件跳转等。
- 示例：
```
const pages = getCurrentPages();
console.log(pages); // 输出当前页面栈
```

详细讲解与拓展：

uni.navigateTo：
- 用于打开一个新的页面，但不关闭当前页面，用户可以通过返回操作回到当前页面。通常用于应用内部的页面跳转，比如从首页跳转到详情页等。
- navigateTo 支持携带参数，通常通过 url 字符串传递查询参数（如上面示例中的 id=123）。
示例：
```
uni.navigateTo({
 url: '/pages/details/details?id=123&name=example'
});
```
uni.redirectTo：
- 与 uni.navigateTo 类似，但 redirectTo 会关闭当前页面，跳转到目标页面。适合用于单页面的场景，或者需要清理当前页面栈的情况（如用户登录后跳转到首页）。
- 注意：redirectTo 不支持跳转到 tabBar 页面。
示例：
```
uni.redirectTo({
 url: '/pages/profile/profile'
});
```
uni.reLaunch：
- 用于重新启动应用，或者跳转到一个新的页面并清空整个页面栈。常用于退出登录、重启应用或清理页面历史记录的场景。
- reLaunch 适合用于从登录页跳转到主页时清理页面历史。
示例：
```
uni.reLaunch({
 url: '/pages/login/login'
});
```
uni.switchTab：
- uni.switchTab 只支持跳转到 tabBar 页面，适合用于底部导航的场景。比如在购物车、首页等页面之间切换时使用。
- switchTab 会自动关闭其他非 tabBar 页面，并确保当前页面是一个 tabBar 页面。
示例：
```
uni.switchTab({
 url: '/pages/cart/cart'
});
```
uni.navigateBack：
- 用于返回上一页面，类似于浏览器的“后退”按钮。可以通过 delta 参数指定返回的页面数，delta 默认值是 1，表示返回上一页。
- 如果页面栈中没有上一页，navigateBack 会直接结束当前页面。
示例：
```
uni.navigateBack({
 delta: 2 // 返回到前两个页面
});
```
uni.getCurrentPages：
- getCurrentPages 可以返回当前应用的页面栈（一个数组），每个页面都是一个页面对象。通过这个方法，可以获取到当前页面的位置，进行一些条件跳转或判断页面栈的长度。
- 这对于进行页面逻辑控制、跳转优化非常有用。
示例：
```
const pages = getCurrentPages();
console.log(pages[pages.length - 1].route); // 获取当前页面路径
```

举个例子：

假设你正在开发一个电商应用，用户从首页跳转到商品详情页后，需要在用户点击“返回”按钮时返回到商品列表页。你可以使用 uni.navigateBack 来实现这个功能。

// 商品详情页
uni.navigateBack({
  delta: 1 // 返回商品列表页
});

总结：UniApp 提供了多种跳转方式，包括 navigateTo、redirectTo、reLaunch、switchTab 和 navigateBack 等，每种跳转方式都有其适用场景。通过合理选择跳转方式，可以更好地管理页面导航、控制页面栈、优化用户体验。

参考回答：

详细讲解与拓展：

举个例子：

发表评论 取消回复

发表评论取消回复