IonicPage segment param issue

Ionic Framework ionic-v3
1

I’ve created a test page in my lazy-loaded app that can accept a segment param.

import { Component } from '@angular/core';
import { IonicPage, NavParams } from 'ionic-angular';

@IonicPage({
  segment: 'test/:param'
})
@Component({
  selector: 'page-test',
  templateUrl: 'test.html',
})
export class TestPage {
  constructor(public navParams: NavParams) {
    let param = this.navParams.get('param');
    if (param) console.log('Got param', param);
  }
}

If I navigate to this page via NavController without providing a nav param then the literal segment param name appears in the URL (http://localhost:8100/#/test/:param) and my log is not called.
If I refresh the page then the URL changes to http://localhost:8100/#/test/%3Aparam and my log is called and outputs Got param :param.
If I substitute :param or %3Aparam for any string like http://localhost:8100/#/test/foo, then the page reloads and my log is called and outputs Got param foo.
If I try to go to http://localhost:8100/#/test I get Runtime Error Uncaught (in promise): invalid views to insert.

Are segment params required when loading pages that are setup to listen for them?
If not, is there a way I can load http://localhost:8100/#/test without a param and have it not have :param in the URL?

2

No.

No.

However, you can pass an empty string:

  public openPage(item: any) {
    // this.navCtrl.push('VenuePage', { id: item.id });
    this.navCtrl.push('VenuePage', { id: ''});
  }
3

Thanks, but that still wouldn’t let me navigate to the page via URL with no nav param.

I guess the only solution is to not use a segment param and to instead check the URL with window.location.hash.split('/')[2].

4

See: Get url parameter

5

Well, I tried using window.location to get the nav param, but trying to load the page from an external link removes it on page load (using both /foo and /?param=foo), and changing it while on the page doesn’t do anything unless you refresh, so I’m back to using a segment ID.