如何实现Vue页面刷新后仍能记住页面状态的长尾关键词？

本文共计686个文字，预计阅读时间需要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缓存的数据都会丢失。