如何实现点击ion-button时无页面重载加载组件？

云原生阿岚

2026-8-11

解决Ionic按钮点击不重载页面的问题

问题出在你使用了原生的href属性，它会触发浏览器的全页面跳转，导致页面重载。而Ionic标签页采用的是单页应用（SPA）的路由导航机制，所以能实现无刷新加载组件。要让按钮实现同样的效果，可按以下方式处理：

直接替换为路由指令

用Ionic框架提供的routerLink属性替代href，这是最简便的实现方式：

<ion-button routerLink="/start" class="btn" color="danger">start</ion-button>

这个指令会调用Ionic的单页路由系统，和标签页的导航行为完全一致，不会触发页面重载。

代码控制导航（需额外逻辑时）

如果按钮点击时需要先执行业务逻辑再导航，可使用对应框架的路由服务：

Angular：注入Router服务，在点击事件中调用导航方法

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

constructor(private router: Router) {}

goToStartPage() {
  // 此处添加自定义业务逻辑
  this.router.navigate(['/start']);
}

模板绑定点击事件：

<ion-button (click)="goToStartPage()" class="btn" color="danger">start</ion-button>

Vue：使用路由实例的push方法

methods: {
  goToStartPage() {
    // 此处添加自定义业务逻辑
    this.$router.push('/start');
  }
}

模板绑定点击事件：

<ion-button @click="goToStartPage" class="btn" color="danger">start</ion-button>

React：使用useNavigate钩子

import { useNavigate } from 'react-router-dom';

function HomePage() {
  const navigate = useNavigate();

  const goToStartPage = () => {
    // 此处添加自定义业务逻辑
    navigate('/start');
  };

  return (
    <ion-button onClick={goToStartPage} class="btn" color="danger">start</ion-button>
  );
}