uniapp跳转页面方法
时间: 2025-01-17 10:49:52 浏览: 47
### UniApp 页面跳转方法使用教程
#### 基础页面跳转方式
对于基础的页面跳转需求,`uni.navigateTo` 是一种常用的方式。此函数允许开发者打开一个新的页面并保持当前页面栈不变。当新页面关闭时,会自动回到上一页面。
```javascript
uni.navigateTo({
url: '/pages/targetPage/targetPage'
});
```
为了提供更好的用户体验,在 `navigateTo` 中还可以配置窗口动画效果[^5]:
| 动画名称 | 描述 |
| ----- | ------------------------------------------------------------ |
| slide-in-right | 新窗体从右侧进入 |
| pop-in | 新窗体从左侧进入,且老窗体被挤压而出 |
| fade-in | 新窗体从透明到不透明逐渐显示 |
#### 关闭当前页并重定向至其他页面
如果希望关闭当前页面并重新定位到另一个指定页面,则应采用 `uni.redirectTo` 函数来完成这一操作。
```javascript
uni.redirectTo({
url: '/pages/newPage/newPage'
});
```
#### 返回至上一页或多级返回
针对需要返回前一个或多个历史记录中的页面的情况,可利用 `uni.navigateBack` 实现。通过设定 delta 参数决定回退多少层页面。
```javascript
// 返回上一级页面
uni.navigateBack();
// 或者指定层数
uni.navigateBack({
delta: 2 // 返回两级
});
```
#### 跳转至浏览器外部链接
除了内部页面间的转换外,有时也需要引导用户访问外部网站资源。此时可以通过调用 `plus.runtime.openUrl()` 来实现在默认浏览器中打开特定网址的功能[^1]。
```javascript
if (typeof plus !== 'undefined') {
plus.runtime.openURL('https://example.com');
}
```
#### 替换当前页面为新的首页
最后,若要完全替换掉整个应用的历史记录列表,并加载全新的起始页面,那么应该选用 `uni.reLaunch` 方法来进行处理[^4]。
```javascript
uni.reLaunch({
url: '/pages/home/home'
});
```
阅读全文
相关推荐

















