使用 Vanilla JS 的离子路由

Question

我是 ionic 框架的新手，目前卡在一个需要实现简单导航的项目上。我正在为带有香草js的项目使用离子。

这是我的 HTML 代码：

<ion-router>
    <ion-route url="/new-page" component="new-page"></ion-route>
  </ion-router>
  <ion-nav></ion-nav>

   
    <ion-tabs>
        <!-- Tab views -->
        <ion-tab tab="new-page">
            <ion-nav></ion-nav>
        </ion-tab>

      
        <!-- Tab bar -->
        <ion-tab-bar slot="bottom">
          <ion-tab-button tab="new-page" selected=true>
            <ion-icon name="person"></ion-icon>
          </ion-tab-button>
          
        </ion-tab-bar>
      </ion-tabs>

我在此处呈现的 js 文件中有一个自定义 html 组件。但是我无法将我的选项卡按钮与那个新组件连接起来。

我无法理解这一点。我应该如何在两个屏幕之间导航？

Answer 1

1. Ionic 有内置的路由功能，为了项目的完整性，建议遵循。 离子角度示例：https://ionicframework.com/docs/angular/navigation

2. 如果您希望使用 Vanilla JS 实现自定义路由和功能，建议使用 Core Cordova 库 - https://cordova.apache.org/ 可以轻松与 Boostrap 等 UI 库集成。