ionic 1页面跳转登录页面后,返回按钮处理

说到ionic返回按钮,可能第一想到的就是ionic在app.config中配置按钮的情况,小伙紫还不错嘛。



这篇blog想讨论的恰好不是这个,不过也和他有关啦,就因为这个按钮,在正常页面跳转时候,肯定是需要的。


凡事总有例外:


很多情况下,比如说:
1.你想从修改密码回到登录页面,然后再次登录账号进入SPA,
2.你从SPA切换账号,要登录个新账号 回到登录页面,进行登录操作
3.在页面跳转时,你发现,我屮艸芔茻。。。这尼玛有返回按钮,
是不是满脑子一群‘泥马’狂奔而过。


问题原因就是缓存与历史


这问题就好办了,清缓存,清历史。


问题来了,怎么清?


二笔做法:
重载即:在login 登录页面进行强制刷新。 window.reload();
貌似也行 ,短暂空白,用户体验不好,路由中还需要清缓存,
见过坑爹的事:路由不跳转。页面过去了,但是浏览器地址并不发生改变—-显然不是我搞(至于哪位仁兄,暂不清楚)


其他方法怎么搞?


app.config去配置完全不缓存,这方法比较邪恶,以后想用缓存都用不起来,即使路由搞了cache,貌似也没用。


没副作用的方法:
路由配置: cache:false,与历史清理 $ionicHistory.clearHistory()相结合, $ionicHistory.clearHistory()要在login页面的控制器里使用才是最好的,因为你不知道返回login页面的页面是哪个?O(∩_∩)O哈!


至此,你还没成功,好吧,我无奈,把你代码搞过来,我给你show–show

在网页开发中,capacitor 是一个常用的跨平台框架,用于创建混合应用程序。它结合了Web技术和原生API,使开发人员能够创建原生应用程序的用户界面,并使用像摄像头、文件系统和传感器等设备的原生功能。 在 capacitor 中,页面跳转是一种常见的操作,可以通过编写代码来实现。具体步骤如下: 1. 首先,我们需要安装 capacitor,可以使用 npm 进行安装,命令为:npm install @capacitor/core @capacitor/cli 2. 安装完毕之后,我们需要初始化 capacitor,可以使用以下命令:npx cap init 3. 初始化成功后,我们可以开始创建页面了。可以使用以下命令创建新页面:npx cap generate 4. 创建完页面后,我们需要在代码中定义页面跳转的逻辑。在 capacitor 中,可以使用NavController来实现页面导航。例如,可以使用以下代码进行页面跳转: ```javascript import { NavController } from '@ionic/angular'; constructor(public navCtrl: NavController) {} goToPage(pageName: string) { this.navCtrl.navigateForward(pageName); } ``` 这样,当我们调用 goToPage 方法时,页面将会跳转到指定的页面。 除此之外,capacitor 还支持带参数的页面跳转。我们可以在调用 navigateForward 方法时传入参数来实现。例如: ```javascript goToPage(pageName: string, param: any) { this.navCtrl.navigateForward(pageName, { queryParams: { data: param } }); } ``` 通过这种方式,我们可以在跳转的页面中获取到传递的参数。 总结而言,capacitor 提供了丰富的API来实现页面跳转的功能,开发者可以根据具体需求使用 NavController 来完成页面的跳转导航。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值