Moving from jQuery Mobile to Ionic v4

I’ve been using jQuery Mobile (jQM) for about 10 years and am finally considering moving over to Ionic v4 and had a quick question…

I have been reading the docs on v4 and wanted to know if it was possible to have two html pages (page1.html and page2.html and link between them using the vanilla JS web components method. (ion-router, ion-nav)

In jQM we normally put html/body tags on every page which allowed users to link to any page directly in their browser. How does it work in Ionic v4? What would page1 and page2 look like? Should I include html, js and css links on every page like this? what about the ion-router stuff? What page and how can I get a transition from page1 to page 2? Thanks for taking the time to answer such a beginner question… I could not see any examples of ion-nav in the docs.

page1.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
	<title>Ionic Test Page</title>
	<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">
</head>
<body>

<ion-router use-hash="false">
	<ion-route url="/page2.html" component="page2"></ion-route>
</ion-router>

<ion-app>
	<ion-header>Page 1</ion-header>
	<ion-content padding>
		<a href="page2.html">Go to Page 2</a>
	</ion-content>
</ion-app>

</body>
</html>

page2.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width" />
	<title>Ionic Test Page</title>
	<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">
</head>
<body>

<ion-app>
	<ion-header>Page 2</ion-header>
	<ion-content padding>
		<a href="page1.html">Go to Page 1</a>
	</ion-content>
</ion-app>

</body>
</html>

The web app I want to build has 1000’s of dynamic data driven pages that I want to be able to load each page from the server. Is there a way to do this in Ionic v4 using vanilla JS methods?

Does anyone have any examples of v4 ion-router and ion-nav using the plain vanilla js method? It appears the online help for v4 does not include any examples. Thanks!

You should be able to change the platform on the left hand side of the documentation site to JavaScript.

I used JQM at first. Have been using Ionic since v3 and haven’t looked back. You won’t, either.