小程序(uniapp)页面的跳转方式有哪些,他们之间的区别是什么?

1、uni.navigateTo: 保留当前页面,跳转到应用的某个页面,使用 uni.navigateBack 可以返回原页面。这种方式类似于网页的超链接跳转。

2、uni.redirectTo: 关闭当前页面,跳转大应用内的某个页面。这种方式类似于网页的重定向。

3、uni.switchTab: 跳转到tabBar页面,并关闭其他所有非tabBar页面。

4、uni.reLaunch: 关闭所有页面,打开到应用内的某个页面。

5、nui.navigateBack: 关闭当前页面,返回上一页或多级页面。

        这些跳转方式的主要区别在于他们对页面栈的处理方式不同。uni.navigateTo 会将新页面压入页面栈,而 uni.redirectTo 则不会打开新的页面,而 switchTab 和 reLaunch 、

        uni.switchTab 和 uni.reLaunch 则会关闭当前页面。uni.navigateBack 则会从页面栈中弹出当前页面,返回到上一页面或多级页面。

以下是这些跳转方式的代码示例:

// uni.navigateTo
uni.navigateTo({
	url: '/pages/example/example'
});

// uni.redirectTo
uni.redirectTo({
	url: '/pages/example/example'
});

// uni.switchTab
uni.switchTab({
	url: '/pages/example/example'
});

// uni.reLaunch
uni.reLaunch({
	url: '/pages/example/example'
});

// uni.navigateBack
uni.navigateBack({
	delta: 1
});

在使用这些跳转方式时,需要注意以下几点:

       1、页面栈最大深度为10,当超过10时,需要使用 uni.redirectTo 或 uni.reLaunch。

       2、uni.switchTab 只能用于跳转到 tabBar 页面,不能指定参数。

       3、uni.reLaunch 可以关闭所有页面,包括 tabBar 页面。

        4、uni.navigateTo 和 uni.redirectTo 的跳转方式都可以指定参数。参数可以通过 URL 的查询字符串(query string)来传递。

        以下是使用 uni.navigateTo 和 uni.redirectTo 指定参数的代码示例:

// uni.navigateTo
uni.navigateTo({
  url: '/pages/example/example?param1=value1&param2=value2'
});

// uni.redirectTo
uni.redirectTo({
  url: '/pages/example/example?param1=value1&param2=value2'
});

        在上述示例中,我们通过查询字符串 ?param1=value1¶m2=value2 将参数 param1 和 param2 传递给目标页面。在目标页面中,我们可以通过 this.$route.query 来获取这些参数。

### UniApp 中实现小程序页面跳转的方法 在 UniApp 开发框架中,提供了多种方法来实现小程序页面间的跳转。每种方法适用于不同的场景,并具有特定的功能特性。 #### 常见的小程序页面跳转方式及其特点 1. **`uni.navigateTo`** 此方法用于保留当前页面跳转到应用内的某个页面。但是不能跳转到 `tabBar` 页面。 ```javascript uni.navigateTo({ url: '/pages/example/example' }); ``` 这里的 `url` 参数表示目标页面的路径,支持携带查询参数[^2]。 2. **`uni.redirectTo`** 关闭当前页面跳转到应用内的某个页面。同样不支持跳转到 `tabBar` 页面。 ```javascript uni.redirectTo({ url: '/pages/example/example' }); ``` 使用此方法时需要注意,由于会关闭当前页面,因此不适合返回操作后的场景[^2]。 3. **`uni.switchTab`** 跳转到 `tabBar` 页面,并关闭其他非 `tabBar` 页面。仅能用于跳转到定义在 `pages.json` 文件中的 `tabBar` 配置项所指定的页面。 ```javascript uni.switchTab({ url: '/pages/tabbar/home/home' }); ``` 如果尝试通过该方法访问非 `tabBar` 页面,则会报错[^2]。 4. **`uni.reLaunch`** 关闭所有页面,打开到应用内的某个页面。通常用于重定向到首页或其他重要入口页面。 ```javascript uni.reLaunch({ url: '/pages/index/index' }); ``` 适合于初始化或重新加载整个流程的情况[^2]。 5. **`uni.navigateBack`** 返回上一页或多级页面。可以通过设置 `delta` 属性控制返回的层数。 ```javascript uni.navigateBack({ delta: 1 }); ``` 当前页面栈管理依赖于此功能,合理利用可以提升用户体验。 #### 导航跳转传递参数示例 当需要向目标页面传递数据时,可以在 URL 后附加查询字符串形式的参数。接收方则通过 `onLoad` 生命周期函数获取这些参数。 ```javascript // 发起跳转并附带参数 goDetail() { uni.navigateTo({ url: '/pages/detail/detail?id=80&name=example' }); } // 接收参数 (位于 detail.vue 的 onLoad 函数) export default { onLoad(options) { console.log('接收到的id:', options.id); // 输出:80 console.log('接收到的名字:', options.name); // 输出:example } } ``` 以上代码展示了如何发送以及解析简单的键值对参数[^1]。 #### 跳转至第三方小程序实例 除了内部页面切换外,还可以借助 `uni.navigateToMiniProgram` 实现跨小程序间通信。具体有两种途径——基于 AppId 和 Path 或者 Short Link 方式完成调用。 ```javascript const jumpByPath = () => { uni.navigateToMiniProgram({ appId: 'wxdemo', path: 'index?foo=bar', success(res) {}, fail(err) {} }); }; const jumpByShortLink = () => { uni.navigateToMiniProgram({ shortLink: '#小程序://Example/...' }); }; ``` 这两种模式各有优劣,实际开发过程中应依据业务需求选取合适方案[^3]。 #### 设置分享后自动跳转指定页面案例 为了让用户点击消息卡片能够进入开发者预设好的界面而非默认首页,可在对应事件处理逻辑处配置好回调地址即可达成目的。 ```javascript onShareAppMessage() { return { title: '欢迎体验我们的服务!', path: '/custom/path/to/share/target' }; } ``` 如此一来,无论何时何地触发分享行为都会导向设定的新位置而不是原始链接指向之处[^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值