title: How to apply persist data when clicking from Vuetify Data Table?
body: <p>Our application shows several thousand users in a Vuetify data able. We can search and sort to find users. Then, we can click on a user's name to open their profile.</p>
  
  <p>The problem is that when we click "back" in the browser, the search/sort/pagination from the table is gone and we have to start over. It's really annoying when we are trying to look at lots of users very quickly.</p>
  
  <p>What is the proper way to make the table not "reset" each time the page loads?</p>
  
  <p>EDIT: We were able to get it working using keep-alive. See the App.vue code below...</p>
  
  <p>Our table code. The Name cell has the link to the user profile page.</p>
  
  <pre><code>&lt;v-data-table
      v-bind:headers="headers"
      :items="users"
      :search="search"
      :rows-per-page-items="[10,25]"
      &gt;
      &lt;template slot="items" slot-scope="props"&gt;
          &lt;td&gt;
              &lt;img v-if="props.item.photoUrl" :src="props.item.photoUrl" class="user-img"&gt;
              &lt;img v-if="!props.item.photoUrl" src="/static/avatar.png" class="user-img"&gt;
          &lt;/td&gt;
          &lt;td&gt;
              &lt;router-link v-if="props.item.name" v-bind:to="'/staff/' + props.item.id"&gt;{{ props.item.name }}&lt;/router-link&gt;
              &lt;router-link v-if="!props.item.name" v-bind:to="'/staff/' + props.item.id"&gt;{{ props.item.id }}&lt;/router-link&gt;
          &lt;/td&gt;
          &lt;td&gt;{{ props.item.validState | round | percentage }}&lt;/td&gt;
          &lt;td&gt;{{ props.item.averageScore }}&lt;/td&gt;
  
  
  
          &lt;td&gt;{{ props.item.standing }}&lt;/td&gt;
          &lt;td&gt;{{ props.item.email }}&lt;/td&gt;
          &lt;td&gt;{{ props.item.phone}}&lt;/td&gt;
          &lt;td&gt;
              &lt;span v-if="props.item.tipsUrl"&gt;Yes&lt;/span&gt;
          &lt;/td&gt;
          &lt;td&gt;{{ props.item.city }}&lt;/td&gt;
      &lt;/template&gt;
      &lt;template slot="pageText" slot-scope="{ pageStart, pageStop }"&gt;
          From {{ pageStart }} to {{ pageStop }}
      &lt;/template&gt;
  &lt;/v-data-table&gt;
  </code></pre>
  
  <p>App.vue keep-alive solution:</p>
  
  <pre><code>&lt;template&gt;
  &lt;v-app light&gt;
  &lt;v-content&gt;
    &lt;transition name="router-anim"&gt;
      &lt;keep-alive include="Event Reports,Users,Event Checkin,Event Jobs,Event Grades"&gt;
      &lt;router-view/&gt;
      &lt;/keep-alive&gt;
    &lt;/transition&gt;
  &lt;/v-content&gt;
  </code></pre>
  
  <p>
  </p>