ionic4学习笔记（二）-- 创建页面，ion-back-button属性-CSDN博客

本文链接：https://blog.csdn.net/come0across/article/details/98495385

本文介绍了在Ionic4中如何创建页面和设置ion-back-button属性，包括创建user页面、添加跳转按钮及自定义back按钮的文字、颜色、默认路径和禁用状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建user页面

ionic g page user

ionic提供了用命令生成界面的功能：
在命令行输入ionic g
如下：
PS D:\item\ionic-test> ionic g
? What would you like to generate? (Use arrow keys)
page
component
service
module
class
directive
guard
(Move up and down to reveal more choices)

2.创建按钮

在首页创建一个可以跳转到user页面的按钮

<ion-button  routerLink="/user" color="success" icon-start>User</ion-button>

在这里插入图片描述

3.修改user页面的标题栏

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button></ion-back-button>
    </ion-buttons>
    <ion-title>User</ion-title>
  </ion-toolbar>
</ion-header>

在这里插入图片描述
想去掉Back，在ion-back-button上添加属性text=""

<ion-header>
  <ion-toolbar>
    <ion-buttons slot="start">
      <ion-back-button text=""></ion-back-button>
    </ion-buttons>
    <ion-title>User</ion-title>
  </ion-toolbar>
</ion-header>

ion-back-button属性：
text: 返回按钮的文字
color:返回按钮的颜色（“primary”, “secondary”, “tertiary”, “success”, “warning”, “danger”, “light”, “medium”, and “dark”）
defaultHref：默认返回路径（不设置，自动返回上一页）
disabled：返回功能的显示和隐藏
icon：返回按钮的图标