如何使用Ionic 4路由器实现回退页面(不使用Angular)

bfnvny8b 于 2023-05-05 发布在 Ionic

关注(0)|答案(3)|浏览(235)

我正在使用Ionic 4和Stenciljs来开发一个渐进式Web应用程序（PWA），我没有使用Angular。我使用离子路由器的路由。有谁能帮助我理解如何实现一个回退“找不到页面”页面，当有人输入一个没有定义路由的URL时显示（即您访问的页面不存在！我能找到的所有例子都假设使用Angular，但我想看看我是否只需要标准的Web组件而不需要额外的框架。
下面是我当前的一些路由器代码的外观（它使用了tab组件）。

return (
  <ion-router useHash={false}>
    <ion-route-redirect from="/" to='/blog' />
    <ion-route component="page-tabs">
      <ion-route url="/blog" component="tab-blog">
        <ion-route component="page-blog"></ion-route>
      </ion-route>

      <ion-route url="/books" component="tab-books">
        <ion-route component="page-books"></ion-route>
      </ion-route>
      <ion-route url="/art" component="tab-art">
        <ion-route component="page-art"></ion-route>
      </ion-route>
      <ion-route url="/about" component="tab-about">
        <ion-route component="page-about"></ion-route>
      </ion-route>
      <ion-route url="/beaver-cage-command-chron" component="tab-books">
        <ion-route component="page-cmd-chron-beaver-cage"></ion-route>
      </ion-route>
      <ion-route url="/cage" component="tab-books">
        <ion-route component="page-cage"></ion-route>
      </ion-route>
      <ion-route url="/d-1-3-weapons-platoon" component="tab-books">
        <ion-route component="page-photos-weapons-platoon"></ion-route>
      </ion-route>
      <ion-route url="/ray-kelley-silver-star" component="tab-books">
        <ion-route component="page-ray-kelley-silver-star"></ion-route>
      </ion-route>
      <ion-route url="/photos" component="tab-books">
        <ion-route url="/:name" component="app-photos"></ion-route>
      </ion-route>
      <ion-route url="/vietnam-1967-amphibious-combat" component="tab-books">
        <ion-route component="page-vietnam-1967-amphibious-combat"></ion-route>
      </ion-route>

      {blogPostRoutes}

    </ion-route>

  </ion-router>
);

}

ionic-framework

来源：https://stackoverflow.com/questions/59188662/how-to-implement-fallback-page-with-ionic-4-router-and-without-angular

3条答案

按热度按时间

zed5wv101#

我所知道的唯一可能的方法是使用多个路由重定向：

<ion-router>
  <ion-route url="/one" component="page-one" />
  <ion-route url="/two" component="page-two" />
  <ion-route url="/three" component="page-three" />
  <ion-route url="/404" component="page-404" />

  <ion-route-redirect from="/one" to="/one" />
  <ion-route-redirect from="/two" to="/two" />
  <ion-route-redirect from="/three" to="/three" />
  <ion-route-redirect from="*" to="/404" />
</ion-router>

这是因为只有第一个匹配的route-redirect会被调用。然而，对于大量的路线，这变得相当不可行。正在Ionic's Github Repo上跟踪添加回退路由的功能请求。

**编辑：**实际上我只是想把它 Package 在一个功能组件中，以避免有太多的重复：

import { FunctionalComponent } from '@stencil/core';
import { JSX } from '@ionic/core';

export const Route: FunctionalComponent<JSX.IonRoute> = props => [
  <ion-route {...props} />,
  <ion-route-redirect from={props.url} to={props.url} />,
];

import { Route } from './route';

<ion-router>
  <Route url="/one" component="page-one" />
  <Route url="/two" component="page-two" />
  <Route url="/three" component="page-three" />

  <ion-route-redirect from="*" to="/404" />
</ion-router>

赞(0）回复(0）举报 2023-05-05

4c8rllxm2#

您可以在路由器的末尾添加一个备用页面的路由，如下所示

const routes: Route = [
  {path: "OtherPaths",component: OtherPathsComponent},
  {path: "PathNotFound", component: PathNotFoundComponent},
  {path: "**", redirectTo: "PathNotFound"}
]

赞(0）回复(0）举报 2023-05-05

rlcwz9us3#

现在有一个更好的解决方案-使用动态路由来捕获任何与现有路由不匹配的内容。

<ion-route url=":any" component="page-404" />

如果您有受保护的路由或有条件渲染的路由，您也可以将该路由添加到如下所示的检查后面。

{authLoaded && <ion-route url=":any" component="page-404" />}

在这里找到了这个答案：https://github.com/ionic-team/ionic-framework/issues/18687#issuecomment-781214605
适用于vanilla JS / StencilJS

赞(0）回复(0）举报 2023-05-05

我来回答

如何使用Ionic 4路由器实现回退页面(不使用Angular)

3条答案

相关问题

热门标签

最新问答