路由到单独选项卡中的页面时没有后退按钮（单页应用程序）

Posted 2023-03-16

【中文标题】路由到单独选项卡中的页面时没有后退按钮（单页应用程序）

【英文标题】：No back button when routing to a page within a separate tab (single-page app)

【发布时间】：2021-05-07 19:19:34

【问题描述】：

我正在使用 Ionic（使用 Angular 路由器）构建一个移动应用程序。该应用程序底部有一个tab bar，这是相当标准的。

假设我的应用程序结构如下所示：

主页 - /tabs/home 事件列表 - /tabs/events/list 查看事件 - /tabs/events/view 创建事件 - /tabs/events/create

事件列表包含指向传递单击事件的查看事件屏幕的链接。它还具有指向创建事件屏幕的链接。

我的查看事件和创建事件页面的标题中有以下内容，可将您带回查看事件屏幕。

<ion-header>
    <ion-toolbar>
        <ion-buttons slot="start">
            <ion-back-button routerLink="/tabs/events/list" routerDirection="back"></ion-back-button>
        </ion-buttons>

在主页上，我想放置一个指向“创建活动”页面的链接。如果我添加<ion-button routerLink="/tabs/events/create">Create Event</ion-button>，它会将选项卡更改为“事件”选项卡并显示该页面，但没有返回按钮可返回到主事件列表屏幕。

我尝试将 <ion-back-button 更改为 <ion-button 也没有任何乐趣。

【问题讨论】：

不确定它是否有效，但请尝试Location。检查***.com/a/36470719/5909026

你是在浏览器还是手机上测试？

@SergeyMell 两者；在可能的情况下，我在浏览器中使用ionic serve 进行测试，因为它更快，然后在推送代码之前转到ionic cap run ios -l --external 在设备上进行测试，或者是否需要任何插件

网页和移动设备上后退按钮的行为是一样的吗？

@SergeyMell 是的。正如您在已删除的答案中提到的那样，查看defaultHref，看起来它可能会奏效。你知道那和routerLink有什么区别吗？

【参考方案1】：

我已经对您的问题进行了一些研究。在一般情况下，如果您的导航堆栈中没有可用的历史记录，则不会呈现 ion-back-button。

但是ion-back-button 与 ion tab 结合使用时不能正常工作。在这里您可以找到被多个问题确认的explanation of this problem：Issue 1、Issue 2 等。

可以使用的第一个解决方案是an enhanced ion-button package。我没有尝试过，但开发人员在可能的解决方案之类的问题中提到了它

另一种方法是使用 defaultHref 属性，即使没有历史记录，您也可以导航回定义的 URL。这在一般情况下看起来像一个拐杖，但是当后退按钮 URL 被明确预定义时，它可能在一些简单的情况下起作用。在这里查看更多信息：https://ionicframework.com/docs/api/back-button#properties

【讨论】：

为解释干杯，以及潜在的解决方法。非常感谢，祝您有美好的一天！