about.vue

<template>
  <f7-page name="about">
    <nav-bar page-title="About" :root-view="rootView"></nav-bar>

    <f7-block-title>About My App</f7-block-title>
    <f7-block strong>
      <p>Fugiat perspiciatis excepturi, soluta quod non ullam deleniti. Nobis sint nemo consequuntur, fugiat. Eius perferendis animi autem incidunt vel quod tenetur nostrum, voluptate omnis quasi quidem illum consequuntur, a, quisquam.</p>
      <p>Laudantium neque magnam vitae nemo quam commodi, in cum dolore obcaecati laborum, excepturi harum, optio qui, consequuntur? Obcaecati dolor sequi nesciunt culpa quia perspiciatis, reiciendis ex debitis, ut tenetur alias.</p>
    </f7-block>
    <f7-block>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni molestiae laudantium dignissimos est nobis delectus nemo ea alias voluptatum architecto, amet similique, saepe iste consectetur in repellat ut minus quibusdam!</p>
      <p>Molestias et distinctio porro nesciunt ratione similique, magni doloribus, rerum nobis, aliquam quae reiciendis quasi modi. Nam a recusandae, fugiat in ea voluptates fuga eius, velit corrupti reprehenderit dignissimos consequatur!</p>
      <p>Blanditiis, cumque quo adipisci. Molestiae, dolores dolorum quos doloremque ipsa ullam eligendi commodi deserunt doloribus inventore magni? Ea mollitia veniam nostrum nihil, iusto doloribus a at! Ea molestiae ullam delectus!</p>
    </f7-block>
  </f7-page>
</template>

<script>
import NavBar from '../components/nav-bar.vue'

export default {
  components: {
    NavBar,
  },

  props: {

    fromMenu: {
      type: Boolean,
      default: false,
    },
  },

  data() {
    return {
      rootView: false,
    }
  },

  mounted() {
    console.log(this)
  }
}
</script>

app.vue

<template>
<f7-app :params="f7params">
  <!-- Status bar overlay for fullscreen mode-->
  <f7-statusbar></f7-statusbar>

  <!-- Left panel with cover effect-->
  <f7-panel left cover theme-dark>
    <f7-page>
      <f7-list>
        <f7-list-item :link="'/'" :reload-current="true" :route-props="{fromMenu: true}" title="News" class="panel-close"></f7-list-item>
        <f7-list-item :link="'/weather/'" :reload-current="true" :route-props="{fromMenu: true}" title="Weather" class="panel-close"></f7-list-item>
      </f7-list>
    </f7-page>
  </f7-panel>


  <!-- Your main view, should have "view-main" class -->
  <f7-view main class="safe-areas" :push-state="true"></f7-view>
</f7-app>
</template>

home.vue

<template>
  <f7-page name="home">
    <nav-bar page-title="WRAL News" :from-menu="fromMenu" :root-view="rootView"></nav-bar>

    <f7-block strong>
      <p>Here is your blank Framework7 app. Let's see what we have here.</p>
      <p><f7-link href="/weather/" :route-props="{subview: }">Weather Page</f7-link></p>
    </f7-block>

    <f7-block-title>Navigation</f7-block-title>
    <f7-list>
      <f7-list-item link="/about/" title="About"></f7-list-item>
      <f7-list-item link="/form/" title="Form"></f7-list-item>
    </f7-list>

    <f7-block-title>Modals</f7-block-title>
    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised popup-open="#my-popup">Popup</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised login-screen-open="#my-login-screen">Login Screen</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-block-title>Panels</f7-block-title>
    <f7-block strong>
      <f7-row>
        <f7-col width="50">
          <f7-button fill raised panel-open="left">Left Panel</f7-button>
        </f7-col>
        <f7-col width="50">
          <f7-button fill raised panel-open="right">Right Panel</f7-button>
        </f7-col>
      </f7-row>
    </f7-block>

    <f7-list>
      <f7-list-item
        title="Dynamic (Component) Route"
        link="/dynamic-route/blog/45/post/125/?foo=bar#about"
      ></f7-list-item>
      <f7-list-item
        title="Default Route (404)"
        link="/load-something-that-doesnt-exist/"
      ></f7-list-item>
      <f7-list-item
        title="Request Data & Load"
        link="/request-and-load/user/123456/"
      ></f7-list-item>
    </f7-list>

  </f7-page>
</template>

<script>
import NavBar from '../components/nav-bar.vue'

export default {
  components: {
    NavBar
  },
  props: {
    pageTitle: String,
    fromMenu: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      rootView: true
    }
  },
}
</script>