Ionic 3中a标签href内部链接跳转问题求助

嘿，我刚入门Ionic Angular的时候也踩过一模一样的坑！普通的<a>标签根本不适合用来做Ionic单页应用的内部路由跳转，这也是你报错的核心原因。下面给你几个靠谱的解决方案：

1. 用Ionic专属的<ion-router-link>组件 #

这是最直接的方式，专门为Ionic路由跳转设计，用法和<a>标签类似，但能正确触发Angular的客户端路由：

<ion-router-link href="/list">跳转到列表页</ion-router-link>

注意这里的href路径要和你app-routing.module.ts里配置的路由path完全对应，默认sidemenu模板里列表页的路由是path: 'list'，所以路径写/list就对了。如果你的目标路径是/list/list，要先确认路由配置里有没有对应的规则哦。

2. 通过TypeScript代码触发跳转（适合带逻辑判断的场景） #

如果需要在点击按钮或者执行某些业务逻辑后再跳转，就用Angular的Router服务：

第一步：在组件里导入并注入Router #

import { Component } from '@angular/core';
import { Router } from '@angular/router'; // 导入Router服务

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {
  // 构造函数中注入Router
  constructor(private router: Router) {}

  // 定义跳转方法
  goToListPage() {
    this.router.navigate(['/list']); // 传入目标路由路径的数组
  }
}

第二步：在模板里绑定点击事件 #

<ion-button (click)="goToListPage()">跳转到列表页</ion-button>

3. 先确认你的路由配置是否正确 #

先检查app-routing.module.ts里有没有正确配置列表页的路由，默认sidemenu模板的路由应该是这样的：

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },
  {
    path: 'list', // 列表页的路由路径
    loadChildren: () => import('./list/list.module').then( m => m.ListPageModule)
  }
];

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

如果你的目标路径是/list/list，要确保路由配置里存在对应的多级路由规则。

为什么普通<a>标签不行？ #

Ionic Angular是单页应用（SPA），普通的<a>标签会发起全新的HTTP请求，导致整个页面重新加载，而Angular的路由是客户端路由，需要通过专门的方式触发，这样才能保留SPA的特性——不刷新页面、正确加载对应组件、保留应用状态。

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