让你辛辛苦苦选好的筛选条件刷新页面后不丢失，该怎么做？
你有遇到过同样的需求吗？告诉我你的第一想法。存 Session storage ？可以，但是我更建议你使用 router.replace 。
为什么建议使用 router.replace 而不是浏览器自带的存储空间呢？
增加实用性，你有没有考虑过这种场景，也就是当我筛选好之后进行搜索，我需要将它发给我的同事。当使用storage时是实现不了的，同事只会得到一个初始的页面。那我们将这个筛选结果放入url中是不是就可以解决这个问题了。
router.replace
先给大家介绍一下 router.replace 的用法吧。
router.replace 是 Vue Router 提供的一个方法，用于替换当前的历史记录条目。与 router.push 不同的是，replace 不会在浏览器历史记录中添加新记录，而是替换当前的记录。这对于需要在 URL 中保存状态但不想影响浏览器导航历史的场景非常有用。
// 假设我们正在使用 Vue 2 和 Vue Router
methods: {
updateFilters(newFilters) {
// 将筛选条件编码为查询字符串参数
const query = {
...this.$route.query,
...newFilters,
};
// 使用 router.replace 更新 URL
this.$router.replace({ query });
}
}
在这个示例中，updateFilters 方法接收新的筛选条件，并将它们合并到当前的查询参数中。然后使用 router.replace 更新 URL，而不会在历史记录中添加新条目。
具体实现
将筛选条件转换为适合 URL 的格式，例如 JSON 字符串或简单的键值对。以下是一个更详细的实现：
methods: {
applyFilters(filters) {
const encodedFilters = JSON.stringify(filters);
this.$router.replace({
path: this.$route.path,
query: { ...this.$route.query, filters: encodedFilters },
});
},
getFiltersFromUrl() {
const filters = this.$route.query.filters;
return filters ? JSON.parse(filters) : {};
}
}
在这个实现中，applyFilters 方法将筛选条件编码为 JSON 字符串，并将其存储在 URL 的查询参数中。getFiltersFromUrl 方法用于从 URL 中读取筛选条件，并将其解析回 JavaScript 对象。
注意事项
- 编码和解码：在将复杂对象存储到 URL 时，确保使用
encodeURIComponent和decodeURIComponent来处理特殊字符。 - URL 长度限制：浏览器对 URL 长度有一定的限制，确保不要在 URL 中存储过多数据。
- 数据安全性：考虑 URL 中数据的敏感性，避免在 URL 中存储敏感信息。
- url重置：不要忘了在筛选条件重置时也将
url重置，在取消筛选时同时去除url上的筛选。
一些其他的应用场景
- 重定向用户：
- 当用户访问一个不再存在或不推荐使用的旧路径时，可以使用
router.replace将他们重定向到新的路径。这避免了用户点击“返回”按钮时再次回到旧路径。
- 处理表单提交后清理 URL：
- 在表单提交后，可能会在 URL 中附加查询参数。使用
router.replace可以在处理完表单数据后清理这些参数，保持 URL 的整洁。
- 登录后跳转：
- 在用户登录后，将他们重定向到一个特定的页面（如用户主页或仪表盘），并且不希望他们通过“返回”按钮回到登录页面。使用
router.replace可以实现这一点。
- 错误页面处理：
- 当用户导航到一个不存在的页面时，可以使用
router.replace将他们重定向到一个错误页面（如 404 页面），并且不希望这个错误路径保留在浏览历史中。
- 动态内容加载：
- 在需要根据用户操作动态加载内容时，使用
router.replace更新 URL，而不希望用户通过“返回”按钮回到之前的状态。例如，在单页应用中根据选项卡切换更新 URL。
- 多步骤流程：
- 在多步骤的用户流程中（如注册或购买流程），使用
router.replace可以在用户完成每一步时更新 URL，而不希望用户通过“返回”按钮回到上一步。
- 清理查询参数：
- 在用户操作完成后，使用
router.replace清理不再需要的查询参数，保持 URL 简洁且易于阅读。
小结
简单来说就是把你的
url当成浏览器的sessionstorage了。其实这就是我上周收到的任务，当时我甚至纠结的是该用localStorage还是sessionStorage，忙活半天，不停转类型，然后在开周会我讲了下我的思路。我的tl便说出了我的问题，讲了更加详细的需求，我才开始尝试router.replace，又是一顿忙活。。
来源：juejin.cn/post/7424034641379098663
