如何实现Vue页面刷新后仍保持页面状态？

本文共计703个文字，预计阅读时间需要3分钟。

环境：Vue项目，页面包含搜索、筛选等功能。需求：页面跳转、切换或刷新，希望可以记录用户在页面上的筛选状态。方案v1：Vue提供keep-alive组件，用于缓存不活跃的组件，实现状态保持。

环境

vue项目，页面有搜索、筛选项等。

需求

页面跳转，切换或者刷新，希望可以记住用户在页面的筛选状态

方案v1

vue有提供一种缓存组件的解决方案 — keep-alive。
缓存不活动的组件实例，而不是销毁它们。

<keep-alive> <router-view v-if="$route.meta.keepAlive" class="app-middle-content"/> </keep-alive> <router-view v-if="!$route.meta.keepAlive" class="app-middle-content"/>

我们可以使用keep-alive包括路由组件，去缓存页面状态。

但是，这样并不能满足刷新页面依旧可以记住页面状态的需求。因为刷新浏览器页面的时候，等于是刷新了整个vue实例应用，所有vue缓存的数据都会丢失。