@RiyadKhalifeh wrote:
Hello,
I’am using Vanilla Javascript in Ionic4
I want to route from one page to other but I don’t know how to add second page “such as Login Page for example”
This is my HTML code:<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/index.css"> <script src="https://unpkg.com/@ionic/core@latest/dist/ionic.js"></script> <link href="https://unpkg.com/@ionic/core@latest/css/ionic.bundle.css" rel="stylesheet"> <title>Hello World</title> </head> <body> <ion-app> <ion-menu side="start" menu-id="first"> <ion-header> <ion-toolbar color="primary"> <ion-title>Start Menu</ion-title> </ion-toolbar> </ion-header> <ion-content> <ion-list> <ion-route url="/login" component="page-login"> <ion-item>Login Page</ion-item> </ion-route> </ion-list> </ion-content> </ion-menu> <ion-header> <ion-toolbar> <ion-title>Menu - Basic</ion-title> </ion-toolbar> </ion-header> <ion-content padding> <ion-button expand="block" onclick="openFirst()">Open Start Menu</ion-button> </ion-content> <ion-content padding component="page-login"> Welcome To Login Page </ion-content> </ion-app> <ion-menu-controller></ion-menu-controller> <ion-router> <ion-route url="/login" component="page-login"></ion-route> </ion-router> <!-- <script type="text/javascript" src="cordova.js"></script> --> <script type="text/javascript" src="js/index.js"></script> </body> </html>This is my JS code:
const menuCtrl = document.querySelector('ion-menu-controller'); const navCtrl = document.querySelector('ion-router'); function openFirst() { menuCtrl.enable(true, 'first'); menuCtrl.open('first'); } function login() { navCtrl.push("/login"); }Thanks a lot
Posts: 1
Participants: 1