ionic新加页面并实现路由跳转

曾经终败给现在 2022-02-17 09:39 266阅读 0赞

# 前言 #

创建一个ionic的项目，默认下方只有3个tab页：tab1, tab2, tab3，如果想要加上tab4和tab5，这时候就涉及到了路由跳转。

# 新加页面 #

1.运行命名`ionic g page tab4`，就会在`src/app`下新建一个tab4的模块；

2.在`tabs.router.module.ts`中添加路由跳转:

{
            path: 'tab4',
            children: [
              {
                path: '',
                loadChildren: '../tab4/tab4.module#Tab4PageModule'
              }
            ]
          }

3.在`tabs.page.html`中添加显示内容

<ion-tab-button tab="tab4">
          <ion-icon name="notifications"></ion-icon>       //图标的样式
          <ion-label>通知</ion-label>       //显示的内容
        </ion-tab-button>

[https://ionicons.com/][https_ionicons.com] 这是ionic的图标的网站，可以在里面搜索想要的图标替换自带的图标。

我的项目图标展示：  
![在这里插入图片描述][20190419112147853.png]

# 按钮跳转界面 #

实现效果：  
  ![在这里插入图片描述][20190419112946982.gif]  
  实现方式：

1.界面跳转：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]  
  2.返回按钮：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]

[https_ionicons.com]: https://ionicons.com/
[20190419112147853.png]: /images/20220217/828c3118424843dbbac76051ba9238f3.png
[20190419112946982.gif]: /images/20220217/17e2afa7e733428f8da9ff6586a8cf54.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70]: /images/20220217/2d06a4e50b4147b08e3d078ea42d6c0c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L20wXzM3NTA4NTMx_size_16_color_FFFFFF_t_70 1]: /images/20220217/a8dd223d040542a6b461509d956977e7.png