页面跳转时保留用户列表页筛选条件的实现方案咨询

方案一：使用<keep-alive>缓存页面组件（推荐） #

这是最贴合你场景的方案，能直接缓存用户列表页的状态，返回时无需重新加载。你之前尝试失败可能是路由配置或使用方式不对，步骤如下：

1. 修改路由配置
   在路由文件中给用户列表页添加meta.keepAlive标记，指定该页面需要缓存：

const routes = [
  {
    path: '/users',
    name: 'users___' + yourLocaleCode, // 匹配你的多语言路由名
    component: UsersList,
    meta: { keepAlive: true } // 标记为需要缓存的页面
  },
  {
    path: '/users/:id',
    name: 'users-id___' + yourLocaleCode,
    component: UserDetail
  }
]

2. 在App.vue中配置缓存规则
   用<keep-alive>包裹需要缓存的路由组件，区分缓存/非缓存页面：

<template>
  <v-app>
    <router-view v-slot="{ Component }">
      <!-- 缓存标记了keepAlive的页面 -->
      <keep-alive>
        <component :is="Component" v-if="$route.meta.keepAlive" />
      </keep-alive>
      <!-- 不缓存其他页面 -->
      <component :is="Component" v-if="!$route.meta.keepAlive" />
    </router-view>
  </v-app>
</template>

3. 按需控制缓存重置
   如果需要在特定场景（比如从非详情页进入列表页）清空缓存，可在列表页添加钩子：

export default {
  beforeRouteEnter(to, from, next) {
    // 从非详情页进入时重置筛选条件
    if (from.name !== 'users-id___' + this.$i18n.localeProperties.code) {
      next(vm => {
        vm.search = ''
        vm.filterType = ''
        vm.filterAge = ''
      })
    } else {
      next()
    }
  }
}

方案二：本地存储持久化筛选条件 #

如果需要页面刷新后仍保留筛选状态，可将筛选值存在localStorage或sessionStorage：

export default {
  data() {
    return {
      search: '',
      filterType: '',
      filterAge: ''
    }
  },
  created() {
    // 页面初始化时恢复筛选条件
    this.search = localStorage.getItem('user_search') || ''
    this.filterType = localStorage.getItem('user_filter_type') || ''
    this.filterAge = localStorage.getItem('user_filter_age') || ''
  },
  watch: {
    // 监听筛选值变化，同步到本地存储
    search(newVal) {
      localStorage.setItem('user_search', newVal)
    },
    filterType(newVal) {
      localStorage.setItem('user_filter_type', newVal)
    },
    filterAge(newVal) {
      localStorage.setItem('user_filter_age', newVal)
    }
  }
}

若只需会话内保留（关闭浏览器后清空），替换localStorage为sessionStorage即可。

方案三：通过路由参数传递筛选条件 #

适合需要将筛选状态嵌入URL的场景（比如分享带筛选的列表链接）：

1. 跳转时携带筛选参数
   修改用户列表页的clickRow方法，把筛选值作为query参数传递：

clickRow(item) {
  this.$router.push({
    name: 'users-id___' + this.$i18n.localeProperties.code,
    params: { id: item.id },
    query: {
      search: this.search,
      filterType: this.filterType,
      filterAge: this.filterAge
    }
  })
}

2. 返回时恢复筛选条件
   在用户列表页的activated（用keep-alive时）或created钩子中读取路由参数：

activated() {
  const { search, filterType, filterAge } = this.$route.query
  if (search !== undefined) {
    this.search = search
    this.filterType = filterType || ''
    this.filterAge = filterAge || ''
    // 触发数据筛选逻辑（比如更新displayedData）
    this.updateDisplayedData()
  }
}

内容的提问来源于stack exchange，提问作者Llexii