ionic4 路由跳转刷新实战

做订餐项目的时候出现了一个问题，就是跳转刷新有时候无效，一共三种情况

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的功能

2.

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

3.

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

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