Ionic v4路由疑问：ion-router-outlet与router-outlet该选哪个？

嗨，刚好我之前也踩过这个坑，来给你理清楚：

首先明确说结论：Ionic 4+ 开发中必须用ion-router-outlet，而不是Angular原生的router-outlet，原因和用法我给你拆解下：

1. 为什么要选ion-router-outlet？ #

它是Ionic专为移动端导航定制的路由出口组件，比原生router-outlet多了这些关键特性：

• 自带Ionic经典的页面切换动画（比如iOS的左滑返回、Android的淡入淡出）
• 自动处理硬件返回键逻辑（维护导航栈，按返回键自动退到上一页）
• 和ion-page组件深度绑定，确保页面的生命周期钩子（比如ionViewWillEnter）正常触发
• 支持Ionic的导航栈管理（比如navigateRoot清空栈、navigateBack返回上一页）

如果用原生router-outlet，虽然能实现基础跳转，但会丢失所有Ionic移动端特有的导航体验，完全浪费了Ionic的框架优势。

2. 怎么正确使用ion-router-outlet？ #

其实用法非常简单，和原生router-outlet几乎一致，只是换个标签：

• 在你的根组件模板（比如app.component.html）里，把<router-outlet></router-outlet>替换成：

<ion-app>
  <ion-router-outlet></ion-router-outlet>
</ion-app>

• 路由配置还是用Angular常规的RouterModule.forRoot()写法，不需要额外修改，Ionic会自动适配你的路由结构生成导航栈。

举个简单的路由配置示例：

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { HomePage } from './pages/home/home.page';
import { DetailPage } from './pages/detail/detail.page';

const routes: Routes = [
  { path: '', redirectTo: 'home', pathMatch: 'full' },
  { path: 'home', component: HomePage },
  // 层级路由会自动加入导航栈
  { path: 'home/detail', component: DetailPage }
];

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

3. 导航方式的适配 #

你之前用的push()/pop()，在Ionic 4里可以用Angular的router.navigate()替代，同时保留栈式导航逻辑：

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

constructor(private router: Router) {}

// 模拟push跳转（加入导航栈）
goToDetail() {
  this.router.navigate(['/home/detail']);
}

// 模拟pop返回（从栈中移除当前页）
goBack() {
  this.router.navigate(['/home']);
  // 也可以用Ionic的NavController的back()方法，兼容性更好
}

// 清空导航栈跳转（比如登录后跳首页）
goToHomeWithClearStack() {
  this.router.navigate(['/home'], { replaceUrl: true });
  // 或者用NavController的navigateRoot('/home')
}

4. 关于文档的小提示 #

你说找不到ion-router-outlet的文档，其实它就在Ionic官方文档的路由章节里，不过可能你搜索的时候关键词没选对。核心用法就是上面这些，只要替换标签，其他和Angular路由逻辑一致。

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