Ionic 4 Fallback Route

在Ionic 4应用程序中，当用户访问不存在的路由时，应用程序会显示一个错误页面。然而，我们可以使用Fallback Route来处理这种情况。在这篇文章中，我们将介绍如何实现这个功能。

添加Fallback Route

要设置Fallback Route，我们需要打开app-routing.module.ts文件，并向其添加如下代码：

const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  { 
    path: '404', 
    loadChildren: () => import('./page-not-found/page-not-found.module').then(m => m.PageNotFoundPageModule)
  },
  {
    path: '**', redirectTo: '/404'
  }
];

如上所示，我们添加了一个名为404的路由，并将其设置为我们的Fallback Route。当我们的程序找不到任何其他有效路由时，它将自动重定向到404路由。

此外，我们还需要添加一个名为PageNotFoundPage的新页面来显示在用户访问不存在的路由时。

创建PageNotFoundPage

为了创建名为PageNotFoundPage的新页面，我们需要打开src/app/目录并创建一个名为page-not-found的新目录。在该目录中，我们需要运行以下命令：

ionic g page page-not-found

此命令将为我们创建一个新的Ionic页面并在page-not-found.module.ts中导入新闻路由。

然后，我们可以在新页面中添加任何我们想要的内容，以便在用户访问不存在的路由时展示。

<ion-header>
  <ion-toolbar>
    <ion-title>
      Page not found
    </ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <p>Sorry, the page you are looking for does not exist.</p>
</ion-content>

总结

通过以上步骤，我们已经成功实现了一个Fallback Route。现在，当用户访问我们应用程序中不存在的路由时，他们将被重定向到我们定义的新页面。