导航4香草Javascript_Javascript_Ionic Framework_Ionic4

导航4香草Javascript

javascript ionic-framework

导航4香草Javascript,javascript,ionic-framework,ionic4,Javascript,Ionic Framework,Ionic4,我正在Ionic4中使用香草Javascript 我想从一个页面路由到另一个页面，但我不知道如何添加第二个页面“例如登录页面” 我尝试在同一个ion应用程序中添加两个ion内容，但都不起作用。这是我的HTML代码： <!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="css/index.css"> <script src="https://

我正在Ionic4中使用香草Javascript

我想从一个页面路由到另一个页面，但我不知道如何添加第二个页面“例如登录页面”

我尝试在同一个ion应用程序中添加两个ion内容，但都不起作用。这是我的HTML代码：

<!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>

那么我如何添加两个页面并在它们之间导航呢？非常感谢。

查看此答案：查看此答案：

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");
}