IONIC 4 - 路线导航

Question

早上好亲爱的，

我是 Ionic 的初学者，在路由方面遇到了一些问题。当我的标题显示时，我在子文件夹中进行导航时遇到了一些困难。

谁能帮我澄清一下我哪里弄错了。

我的标签页也有一个导航到仪表板的路由并且它正在运行。但是当我在我的仪表板页面中重复使用代码导航到 [条形码 - 报告 - 交易 - 帮助] 时，它不起作用

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { DashboardPage } from './dashboard.page';

const routes: Routes = [

{
  path: 'dashboard',
    component: DashboardPage,
    children: [
  {  path: 'barcode', loadChildren: 'barcode/barcode.module#BarcodePageModule' },
  {  path: 'transaction',  loadChildren: 'transaction/transaction.module#TransactionPageModule' },
  {  path: 'report',  loadChildren: 'report/report.module#ReportPageModule'  },
  {  path: 'help', loadChildren: 'help/help.module#HelpPageModule' },  
    ]
  },
  { path: '', redirectTo: '/tabs/dashboard', pathMatch: 'full' }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DashboardPageRoutingModule {}

<!-- START CONTENT -->
<ion-content class="dashboardContent">
    <ion-grid>
      <ion-row >
        <ion-col>
          <div><ion-button routerLink="/barcode"  class="dashboardBtn" color="primary">Barcode Scan</ion-button></div>
        </ion-col>
        <ion-col>
          <div><ion-button routerLink="/transaction" class="dashboardBtn" color="primary">Add Transaction</ion-button></div>
        </ion-col>
      </ion-row>
      <ion-row>
        <ion-col>
          <div><ion-button  routerLink="/report" class="dashboardBtn" color="primary">Report</ion-button></div>
        </ion-col>
        <ion-col>
          <div><ion-button  routerLink="/help" class="dashboardBtn" color="primary">Help</ion-button></div>
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>
 <!-- END CONTENT -->

我的错误是：无法匹配任何路由。 URL 段：'tabs/dashboard/barcode'

提前致谢！

Answer 1

解决方案 1 & 我的首选）您可以使用段而不是选项卡。这是 link Segment reference

解决方案 2 根据您当前的代码）您可以为选项卡提供此参考。使用 ion-tab 而不是 ion-button。

请关注linkTabs reference

Answer 2

感谢您的解释和链接。我想使用这些按钮访问我的其他页面：

我也可以使用制表符或其他解决方案吗？？？

Answer 3

对于第二个问题，如果你需要在帮助中访问你的其他页面，你需要在app-routing.module.ts

中声明路径

`

 { path: 'report', loadChildren: './report/report.module#ReportPageModule' },

然后在您的帮助页面中执行一个方法

goToReport () { this.router.navigateByUrl('reportPage'); }

IONIC 4 - 路线导航

IONIC 4 - Routing Navigation

navigation

routes

ionic4