tab-route and pages issue when switching tab

[Oxar]

Hi. I have created a simple app with route tabs. Each route links to a page (pgGeneral and pgCriteria). I have set this up as advised in the guide notes.
I have encountered an issue when I switch tab: data entered on pgGeneral get removed when going to the next tab criteria. Is this normal behaviour? If not, how would I get to keep my data? by using vuex?
Thanks.

Below is my setup:
layout: default.vue

    <q-layout-header>
      <q-toolbar
        color="primary"
        :glossy="$q.theme === 'mat'"
        :inverted="$q.theme === 'ios'"
      >
        <q-toolbar-title>
         App
          <div slot="subtitle">Running on Quasar v{{ $q.version }}</div>
        </q-toolbar-title>
      </q-toolbar>
    <q-tabs>
      <q-route-tab slot="title" name="tab-1" icon="subject" label="Generalities" to="/" exact />
      <q-route-tab slot="title" name="tab-2" icon="fingerprint" label="Inclusion Criteria" to="/criteria" exact />
    </q-tabs>
    </q-layout-header>
    <q-page-container>
      <router-view />
    </q-page-container>

router --> routes.js:

export default [
  {
    path: '/',
    component: () => import('layouts/default'),
    children: [
      { path: '', component: () => import('pages/pgGeneral') },
      { path: 'criteria', component: () => import('pages/pgCriteria') }
    ]
  },

  { // Always leave this as last one
    path: '*',
    component: () => import('pages/404')
  }
]

my pgGeneral is:

<template>
  <q-page>
    <!-- General Information Tab Card -->
    <q-card class="bg-cyan-2 q-ma-xl">
      <q-card-main>
        <q-field label="Title" >
         <q-input v-model="studyTitle" clearable />
          </div>
        </q-field>
      </q-card-main>
    </q-card> 
  </q-page>
</template>

<script>
export default {
  data () {
    return {
      studyTitle: ''
    }
  }
}
</script>

<style>
</style>

[genyded]

Whether or not you persist the data in Vuex… you will need to load it (typically in the created method) in the component that the tab loads. It’s no different than if you took the tabs out of the mix and just navigated between the pages. An alternative would be Vue’s dynamic components which can be wrapped in a keep-alive element.

[Hawkeye64]

Exactly what @genyded said…

[Oxar]

Thanks @genyded. I am also experimenting with the keep-alive element.