页面跳转与重定向(之二)

前言

这一篇是接着上一篇的继续

页面跳转与重定向(之一)

在上一篇中, 介绍了在html,js 和JSP中如何跳转和重定向。

基本是在页面层级进行页面的跳转, 进入一个页面后跳入另一个页面。

这一篇将从项目和服务端来看看有可能在实际的项目中使用到的状况。


旧的地址跳转到新的地址

在系统开发过程中, 新旧系统并存是一种常见的处理方法,新旧系统有着各自独立的域名地址。 、

当新系统开发完成的时候,就需要把旧地址的域名导到新地

### UniApp中页面跳转重定向实现方法 在UniApp中,页面跳转重定向可以通过`uni.redirectTo`或`uni.reLaunch`方法来实现。这两种方法的功能有所不同,适用于不同的场景。 #### 1. 使用 `uni.redirectTo` `uni.redirectTo` 方法用于关闭当前页面,并跳转到应用内的某个页面。该方法不会将跳转目标页面推入页面栈中,因此无法通过返回按钮回到上一个页面[^3]。 ```javascript uni.redirectTo({ url: '/pages/targetPage/targetPage', // 替换为目标页面路径 success() { console.log('跳转成功'); }, fail(err) { console.error('跳转失败:', err); } }); ``` #### 2. 使用 `uni.reLaunch` `uni.reLaunch` 方法用于关闭所有页面,并打开到应用内的某个页面。这种方法通常用于需要重置整个页面栈的场景,例如从登录页跳转到首页[^3]。 ```javascript uni.reLaunch({ url: '/pages/home/home', // 替换为目标页面路径 success() { console.log('重定向成功'); }, fail(err) { console.error('重定向失败:', err); } }); ``` #### 3. 注意事项 - 在某些情况下,特别是在 `onLaunch` 生命周期中使用 `uni.reLaunch` 时,可能会导致点击事件失效的问题。为了解决这一问题,可以使用 `setTimeout` 延迟执行重定向操作[^2]。 ```javascript onLaunch() { setTimeout(() => { uni.reLaunch({ url: '/pages/user/user' // 替换为目标页面路径 }); }, 0); // 可根据实际需求调整延迟时间 } ``` - 如果需要传递参数,在构造 `url` 时可以通过查询字符串的形式附加参数。接收参数时,可以在目标页面的 `onLoad` 钩子函数中获取[^3]。 ```javascript // 跳转并传递参数 uni.reLaunch({ url: '/pages/targetPage/targetPage?name=John&age=25' }); // 目标页面接收参数 export default { onLoad(options) { console.log('接收到的参数:', options); // { name: 'John', age: '25' } } } ``` ### 示例代码 以下是一个完整的示例,展示如何在 `onLaunch` 中使用 `uni.reLaunch` 实现页面重定向,并传递参数: ```javascript // App.vue onLaunch() { setTimeout(() => { uni.reLaunch({ url: '/pages/home/home?userType=admin', success() { console.log('重定向成功'); }, fail(err) { console.error('重定向失败:', err); } }); }, 0); } // home.vue export default { onLoad(options) { console.log('接收到的参数:', options); // { userType: 'admin' } } } ```
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

oscar999

送以玫瑰,手留余香

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值