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">
      <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>
    </div>
  </div>
</template>
<script>
  return {
    data() {
      return {
        // empty initial user data
        user: {},
      }
    },
    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 user with new user
          self.user = user;
        });
      },
    },
  };
</script>