导航时保留上一页中的过滤器值

Question

这看起来是一个非常简单的问题，但由于某种原因我找不到如何做到这一点的明确答案。

我有 2 个页面：用户页面，其中包含显示在

v-data-table

中的用户列表，并带有搜索和过滤器。当我单击列表中的其中一个用户时，它会打开第二页用户详细信息页面，其中包含该用户的详细信息。

假设在用户页面中，我使用年龄过滤器，显示 30 岁以上的用户，我单击第一个用户查看他的详细信息，当我返回用户页面时，过滤器恢复为中性，我有再次从头开始过滤。 每次我想查看一个用户的详细信息时都必须再次设置过滤器，这非常烦人，因此我试图寻找一种方法，在用户之间导航时使它们保持当前状态。

这是用户页面的样子：

<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>

这就是用户详细信息页面的样子，我使用

$router.back()

导航回上一页 :

<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>

我尝试使用

<keep-alive>

但没有成功，我不知道到底在哪里以及如何使用它。

是否有一种干净的方法可以在用户之间导航，同时将过滤器的值保留在用户页面中？ 预先感谢您。

Answer 1

您是否尝试过使用 vuex 或 pinia （根据您的情况）将过滤器的值保存在本地存储中，以便当您返回上一页时可以默认使用这些值？