How to use the @stencil/core.Prop function in @stencil/core

* @module ionic
  * @description
 */
@Component({
  tag: 'stencil-router'
})
export class Router {
  $el: any;

  base: string;

  @Prop() root: string = '';

  @State() routeMatch: any = {};

  @Prop()
  get match() {
    return this.routeMatch
  }

  @Prop()
  navigateTo(url, data={}) {
    console.log('navigateTo', url, data);
    window.history.pushState(null, null, url);
    this.routeMatch = {
      url: '/' + url.replace(this.root, '')
    }
    console.log('Route match', this.routeMatch);

    console.log('Emitting event');
    //Ionic.emit(this.$instance, 'ionRouterNavigation', { detail: this.routeMatch });
  }

/**
  * @name Router
  * @module ionic
  * @description
 */
@Component({
  tag: 'ion-router'
})
export class Router {
  base: string;

  @Prop() root: string = '';

  @State() routeMatch: any = {};

  @Prop()
  get match() {
    return this.routeMatch;
  }

  /*
  @Prop()
  navigateTo(url, data={}) {
    window.history.pushState(null, null, url);
    this.routeMatch = {
      url: '/' + url.replace(this.root, '')
    }
    console.log('Route match', this.routeMatch);

    console.log('Emitting event');
    Ionic.emit(this.$instance, 'ionRouterNavigation', { detail: this.routeMatch });
  }

})
export class Router {
  $el: any;

  base: string;

  @Prop() root: string = '';

  @State() routeMatch: any = {};

  @Prop()
  get match() {
    return this.routeMatch
  }

  @Prop()
  navigateTo(url, data={}) {
    console.log('navigateTo', url, data);
    window.history.pushState(null, null, url);
    this.routeMatch = {
      url: '/' + url.replace(this.root, '')
    }
    console.log('Route match', this.routeMatch);

    console.log('Emitting event');
    //Ionic.emit(this.$instance, 'ionRouterNavigation', { detail: this.routeMatch });
  }

  componentWillLoad() {
    console.log(' loaded');
    window.addEventListener('popstate', this.handlePopState.bind(this));
    window.addEventListener('hashchange', this.handleHashChange.bind(this));