ionic4 路由跳转刷新实战

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/yujing1314/article/details/91041025

做订餐项目的时候出现了一个问题,就是跳转刷新有时候无效,一共三种情况
1.跳转刷新间歇性失效
2.苹果手机无法跳转
3.无法取消订餐

最开始的时候我是使用下面的方法进行刷新的,就是先跳转到order页面,然后进行刷新,其实本来order页就已经重新赋值了,但是依然无效,即使将数组的值清空,重新赋值依然没有渲染,所以只能采用强制刷新的方法。

this.nav.navigateRoot(['/tabs/order']);//跳转到订单页面
location.reload();//强制刷新,相当于F5的功能

然后就会出现下面的,返回按钮消失,而且没有跳转到order页面
在这里插入图片描述
但是订单取消了
在这里插入图片描述
然后我换了一种跳转路由的方式,依然是强制刷新

this.router.navigateByUrl('tabs/order');
location.reload();

依然不行,就是先跳转过去了,一刷新又回来了,取消订餐也失败了
在这里插入图片描述
如下图
在这里插入图片描述
接下来我用了替换路由刷新的方式

	location.replace('#/tabs/order');
    location.reload();

效果
在这里插入图片描述
成功!

小结

路由跳转刷新一共有如下3种方式,都使用了强制刷新的功能
1.

this.nav.navigateRoot(['/tabs/order']);//跳转到订单页面
location.reload();//强制刷新,相当于F5的功能
this.router.navigateByUrl('tabs/order');
location.reload();
	location.replace('#/tabs/order');
    location.reload();

还有其他的思路,一个是跳转的时候传值,然后让被跳转页根据值选择是否刷新;还有一个是让页面自己每次初始化就刷新一次,然后给缓存存一个值,根据判断值去判断是否刷新过,来实现只刷新一次的功能。

猜你喜欢

转载自blog.csdn.net/yujing1314/article/details/91041025