Ionic 4: Passing parameters between pages with vanilla javascript

Ionic Framework ionic-v3
1

I want to pass one or more parameters switching to the next page using only the ionic web components and vanilla javascript. My router is defined like this:

<ion-router id=“router” use-hash=“true” root="/">
<ion-route url="/" component=“root-page”></ion-route>
<ion-route url="/category/:catname" component=“category-page”></ion-route>
</ion-router>

In the content part of the root page I’m using a nav-push component:

<ion-nav-push component=“category-page” component-props="{‘catname’: ‘houses’}">
<div>
<ion-img src=“img/houses.png”></ion-img>
</div>
</ion-nav-push>

When I click the nav-push the app changes to the category page but without changing the url. When I
omit “/:catname” part in the route url, the url in the browser is ok. But in both cases I’m not able to pass the
parameter “catname”.

What’s wrong? Any idea?

2

is there more code you could show since this is vanilla javascript?

3

As there is no attachment possible, here the entire code file:

<!doctype html>

<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
    
<link rel="icon" type="image/png" href="img/favicon.png">
    
<!-- add to homescreen for ios -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">

<link href="https://unpkg.com/@ionic/core@4.0.0-beta.7/css/ionic.bundle.css" rel="stylesheet">
<script src="https://unpkg.com/@ionic/core@4.0.0-beta.7/dist/ionic.js"></script>
<style>
    .imgcategory {
        display: inline-block;
        vertical-align: top;
        width: 60px;
        height: 68px;
        text-align: center;
    }
    .img {
        width: 48px;
        height: 48px;
        margin: 0 auto;
    }
    .imgcategorytext {
        font-size: 10px;
        font-family: Arial;
        color: #000000;
        font-weight: 400;
    }
    .homepage {
        background-image: url("img/homebgcompressed.png");
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }
    body {
        height: 100%;
        width: 100%;
        font-family: Arial;
    }
</style>

</head>
<body>
<ion-app>
<ion-router id=“router” use-hash=“true” root=“/”>
<ion-route url=“/” component=“root-page”>
<ion-route url=“/category” component=“category-page”>
</ion-router>
<ion-nav>
<ion-content>

    </ion-content>
</ion-app>

<script>

    customElements.define('root-page', class extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `
                <ion-header>
                    <ion-toolbar>
                        <ion-img src="img/ganges2.png" slot="start"></ion-img>
                        <ion-buttons slot="primary">
                            <ion-button fill="transparent">
                                <ion-icon  slot="icon-only" name="search"></ion-icon>
                            </ion-button>
                            <ion-button fill="transparent">
                                <ion-icon slot="icon-only" name="person"></ion-icon>
                            </ion-button>
                        </ion-buttons>
                    </ion-toolbar>
                </ion-header>

                <ion-content fullscreen="true" padding class="homepage">
                    <div style="text-align: center;margin-top: -10px;vertical-align: top;">
                        <ion-nav-push component="category-page" component-props="{'catname': 'houses'}">
                            <div class="imgcategory">
                                <ion-img src="img/houses.png" class="img"></ion-img>
                                <ion-text class="imgcategorytext">Houses</ion-text>
                            </div>
                        </ion-nav-push>
                        <ion-nav-push component="category-page" component-props="{'catname': 'apartments'}">
                            <div class="imgcategory">
                                <ion-img src="img/apartments.png" class="img"></ion-img>
                                <ion-text class="imgcategorytext">Apartments</ion-text>
                            </div>
                        </ion-nav-push>
                        <ion-nav-push component="category-page" component-props="{'catname': 'properties'}">
                            <div class="imgcategory">
                                <ion-img src="img/properties.png" class="img"></ion-img>
                                <ion-text class="imgcategorytext">Properties</ion-text>
                            </div>
                        </ion-nav-push>
                        <ion-nav-push component="category-page" component-props="{'catname': 'newprojects'}">
                            <div class="imgcategory">
                                <ion-img src="img/newprojects.png" class="img"></ion-img>
                                <ion-text class="imgcategorytext">New projects</ion-text>
                            </div>
                        </ion-nav-push>
                        <ion-nav-push component="category-page" component-props="{'catname': 'yachts'}">
                            <div class="imgcategory">
                                <ion-img src="img/yachts.png" class="img"></ion-img>
                                <ion-text class="imgcategorytext">Yachts</ion-text>
                            </div>
                        </ion-nav-push>
                    </div>
                    
                </ion-content>
                `;
        }
    });

    customElements.define('category-page', class extends HTMLElement {
        connectedCallback() {
            this.innerHTML = `
                <ion-header>
                    <ion-toolbar>
                        <ion-buttons slot="start">
                            <ion-back-button></ion-back-button>
                        </ion-buttons>
                        <ion-title>
                            Category xxx
                        </ion-title>
                    </ion-toolbar>
                </ion-header>
                
                <ion-content padding style="background-color: #FFFFFF;">
                    <div class="imgcategory">
                        <ion-img src="img/houses.png"></ion-img>
                        <ion-text class="imgcategorytext">Houses</ion-text>
                    </div>
                    
                </ion-content>
                `;
        }
    });

    var  router  =  document.querySelector("#router");
    
    router.addEventListener('ionRouteDidChange',(e)=>{
        //alert("Page changed!");
    });

</script>

</body>
</html>

4

Did you find any solution?

5

Meanwhile, I use stencil. Unfortunately, the ionic crew and the community work mostly with Angular. Why doesn’t Ionic use their own dog food to create apps? With Stencil I only need one framework for creating the component as well as the application. But the stencil / ionic documentation is pretty much reduced.
Now to my original question in a modified form:
How can I catch the event in Stencil when a “Page” component gets the focus? “componentDidLoad” only fires when the component is first loaded.