Access Param in URL in component/page

Using IonicPage, I can do this:

pushPage(detailInfo) {
    // Push an `token` to the `'reset-password'`
    this.navCtrl.push('reset-password', {
      'token': detailInfo.token

which will get me a url like this: myurl:8100/#/reset-password/abcd where the abcd is the token pushed.

My question is, can I do this:
Enter this url in the browser directly,

and be able to access a :token which contains the uvwxyz string?

Going through the IonicPage docs, I read of dynamically forming URL segments. I wanna know if I can get a reverse of that - from URL into page.

If that ain’t possible, I’ll drop to plain old javascript to grab URL segment.

Ugly, but works:

if location is this:


let token = location.href.split('#')[1].split('/')[2];
console.log(token); // 'abcd'

The (much cleaner) option with IonicPage's segment property seems to work as one would expect.

Will appreciate a how-to as I’m confused about how to do such a thing with the IonicPage. Couldn’t find any example of that sort in the docs.

My sandbox project uses the tabs template. I made the about page lazy for testing lazy loading things, so I made it look like this:

  name: 'AboutPage',
  segment: 'about/:param'
  selector: 'page-about',
  templateUrl: 'about.html'
export class AboutPage {
  param: string;

  constructor(public navCtrl: NavController, np: NavParams) {
    this.param = np.get('param');

The typical URL when I click the About tab looks like so:


I put a {{param}} inside of the template for testing. If I replace the :param in the URL with foo and refresh the browser, I see foo in the template, so it is getting through via the IonicPage deeplink system.


Thanks. That looks cleaner!