Keep filter values in previous page when navigating

Question

This is what looks like to be a very simple matter but for some reason I couldn't find a clear answer on how to do it.

I have 2 pages : users page that contains a list of users displayed in a v-data-table with search and filters. When I click on one of the users from the list, it opens the second page user details page that contains details of the user.

Let's say in the users page I use an age filter that shows me users with age 30+ and I click on the first user to see his details, when I go back to the users page the filters are restored back to neutral and I have to filter again from scratch. It's very annoying to have to set the filters again every time I want to see one user's details so I'm trying to look for a way to keep them in their current state while I navigate between users.

Here's what the users page looks like :

<template>
  <v-card height="100%">
    <v-container>
      <v-row>
        <v-app-bar>
          <v-row>
            <v-col cols="10">
              Users
            </v-col>
          </v-row>

      <v-row>
        <v-col cols="12">
          <v-card>
            <v-card-title>
              <v-row>
                <v-col cols="8">
                  <v-text-field
                    v-model="search"
                    append-icon="mdi-magnify"
                    label="Search users"
                    single-line
                    hide-details
                    solo
                    light
                    dense
                    rounded
                    clearable></v-text-field>
                </v-col>
                <v-col cols="2">
                  <v-select
                    v-model="filterType"
                    :items="typeList"
                    item-text="lib"
                    item-value="value"
                    label="Type"
                    light
                    solo
                    dense
                    clearable></v-select>
                </v-col>
                <v-col cols="2">
                  <v-select
                    v-model="filterAge"
                    :items="ageList"
                    item-text="lib"
                    item-value="value"
                    label="Age"
                    light
                    solo
                    dense
                    clearable></v-select>
                </v-col>
              </v-row>
            </v-card-title>

            <v-container>
              <v-data-table
                v-model="selectedUsers"
                item-key="id"
                :headers="headers"
                :items="displayedData"
                :options.sync="options"
                :loading="loading"
                :search="search"
                @click:row="clickRow"
                show-select>
              </v-data-table>
            </v-container>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
import moment from 'moment'

export default {
methods  & data ... 

    clickRow(item) {
      this.$router.push({
        name: 'users-id___' + this.$i18n.localeProperties.code,
        params: {
          id: item.id,
        },
      })
    },
}
</script>

And this is what the user details page looks like, I use $router.back() to navigate back to the previous page :

<template>
  <v-card height="100%">
    <v-container>
      <v-row>
        <v-app-bar>
          <v-row>
            <v-col cols="8">
              <v-icon dark @click="$router.back()"> mdi-arrow-left </v-icon>
              <v-icon large left>mdi-badge-account-horizontal</v-icon>
              User {{ badgename }}
            </v-col>
          </v-row>
        </v-app-bar>
      </v-row>

      <v-card-text>
      user details here ...
      </v-card-text>
    </v-container>
  </v-card>
</template>

<script>
import moment from 'moment'

export default {
methods & data ...
</script>

I tried using <keep-alive> with no success, I didn't knew exactly where nor how to use it.

Is there a clean way I can naviguate between users while keeping values of the filters in the users page? Thank you in advance.

Answer 1

Have you tried saving the value of the filters in the local storage with vuex or pinia (depending on your case) so that when you return to the previous page you can take those values by default?