Framework7 router component

profile.html

<template>
  <div class="page">
    <div class="navbar">
      <div class="navbar-inner">
        <div class="title">Profile</div>
      </div>
    </div>
    <div class="page-content">
      {{#if user}}
      <!-- Show user list when it is loaded -->
      <div class="list simple-list">
        <ul>
          <li>First Name: {{user.firstName}}</li>
          <li>Last Name: {{user.lastName}}</li>
          <li>Age: {{user.age}}</li>
        </ul>
      </div>
      {{else}}
      <!-- Otherwise show preloader -->
      <div class="block block-strong text-align-center">
        <div class="preloader"></div>
      </div>
      {{/if}}
    </div>
  </div>
</template>
<script>
  return {
    data() {
      return {
        // empty initial user data
        user: null,
      }
    },
    on: {
      pageInit() {
        var self = this;
        var app = self.$app;
        // request user data on page init
        app.request.get('http://api.website.com/get-user-profile', (user) => {
          // update component state with new state
          self.$setState({
            user: user,
          });
        });
      },
    },
  };
</script>