Ionic Tab组件内路由问题：跳转add-contact页面时保留Tabs菜单

Hey there! Since you already have a solid Angular foundation and your tab navigation between home/about/contact is working smoothly, let's tweak things so jumping to the add-contact page keeps those tabs right where they are. Here's exactly what you need to do:

1. Update Your Tab Routing #

First, we need to make the add-contact page a child route of your tabs container. This tells Ionic to load it inside the tab layout instead of replacing the entire tab bar.

Open your tabs.router.module.ts file and add the add-contact route to the children array of the tabs path:

const routes: Routes = [
  {
    path: 'tabs',
    component: TabsPage,
    children: [
      { path: 'home', loadChildren: () => import('../home/home.module').then(m => m.HomePageModule) },
      { path: 'about', loadChildren: () => import('../about/about.module').then(m => m.AboutPageModule) },
      { path: 'contact', loadChildren: () => import('../contact/contact.module').then(m => m.ContactPageModule) },
      // Add this new route for add-contact
      { 
        path: 'add-contact', 
        loadChildren: () => import('../add-contact/add-contact.module').then(m => m.AddContactPageModule) 
      },
      { path: '', redirectTo: '/tabs/home', pathMatch: 'full' }
    ]
  },
  { path: '', redirectTo: '/tabs/home', pathMatch: 'full' }
];

2. Update the Button Navigation in Contact Page #

Now, adjust the button on your contact.page.html to use the full tab-based path for navigation. This ensures we stay within the tab context:

<ion-button routerLink="/tabs/add-contact">
  Add Contact
</ion-button>

If You Prefer Programmatic Navigation #

If you're triggering the navigation via component code (instead of a template link), use the same path with Angular's Router service:

import { Router } from '@angular/router';

@Component({
  // ... your component metadata
})
export class ContactPage {
  constructor(private router: Router) {}

  goToAddContact() {
    this.router.navigate(['/tabs/add-contact']);
  }
}

Why This Works #

By making add-contact a child route of tabs, Ionic loads the page inside the tab's <ion-router-outlet> instead of replacing the entire tab bar component. This keeps your tabs visible while showing the new page content—exactly what you're looking for!

内容的提问来源于stack exchange，提问作者SGR