Question

我具有具有以下结构/代码的标签模块：

tabs.router.module.ts：

const routes: Routes = [
    {
        path: '',
        component: TabsPage,
        children: [
            {
                path: '',
                outlet: 'home',
                component: HomePage
            },
            {
                path: 'chats',
                component: ChatsPage,
                outlet: 'chats'
            },
            {
                path: 'notifications',
                component: NotificationsPage,
                outlet: 'notifications',
            }
        ]
    }
];

tabs.html

<ion-tabs>
  <ion-tab label="HOME" icon="list-box" href="">
    <ion-router-outlet stack name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="CHATS" icon="list-box" href="chats">
    <ion-router-outlet stack name="chats"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="NOTES" icon="list-box" href="notifications">
    <ion-router-outlet stack name="notifications"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

当我单击聊天时，我得到：

ERROR Error: Uncaught (in promise): Error: Cannot match any routes. URL Segment: 'notifications'
Error: Cannot match any routes. URL Segment: 'notifications'

为什么？

Answer 1

也尝试将其添加到您的溃败中

FillQty FillPrice   Bid Ask PiQTY
100 71.32       71.3    71.32   0
150 16.37       16.36   16.37   0
600 30.085      30.08   30.09   600
500 59.365      59.36   59.37   500
500 28.35       28.34   28.35   0
500 93.04       93.04   93.05   0
500 99.385      79.38   100 500
500 75      71.85   80.1    500
3350                    2100

这是html代码

  {
    path: '',
    redirectTo: '/tabs/(home:home)',
    pathMatch: 'full',
  },

Answer 2

路由器：

const routes: Routes = [
    {
        path: 'tabs',
        component: TabsPage,
        children: [
            {
                path: 'home',
                outlet: 'home',
                component: HomePage
            },
            {
                path: 'chats',
                component: ChatsPage,
                outlet: 'chats'
            },
            {
                path: 'notifications',
                component: NotificationsPage,
                outlet: 'notifications',
            }
        ]
    },{
        path: '',
        redirectTo: '/tabs/(home:home)'   
    }
];

模板：

<ion-tabs>
  <ion-tab label="HOME" icon="list-box" href="/tabs/(home:home)">
    <ion-router-outlet stack name="home"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="CHATS" icon="list-box" href="/tabs/(chats:chats)">
    <ion-router-outlet stack name="chats"></ion-router-outlet>
  </ion-tab>
  <ion-tab label="NOTES" icon="list-box" href="/tabs/(notifications:notifications)">
    <ion-router-outlet stack name="notifications"></ion-router-outlet>
  </ion-tab>
</ion-tabs>

Ionic 4-如何使用标签？

2 个答案: