如何让Vue前端在筛选条件变化时自动同步到URL，实现参数实时更新？

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

目录+前言+基础知识+设计思路+decode+encode+详情页返回列表页+结语+前言+在拥有列表页的系统里，为了提升用户体验，需要保持列表页的筛选条件、分页情况。需要做到刷新页面，从详情页返回列表页。

目录

• 前言
• 基础知识
• 设计思路
• decode
• encode
• 详情页返回列表页
• 结语

前言

在有列表页的系统中，常常为了提高用户体验，需要保持列表页的筛选条件、分页情况。需要做到刷新页面，从详情页返回列表页保留之前的筛选情况。你可能会说 vue 用 keep-alive 缓存列表页不就行了？为什么不好呢？

因为正确的做法是将筛选条件保存在 url 上，这样可以复制给别人直接使用，并且你可以看到几乎所有网站都是使用这种方法。接下来会带大家了解有关 url 参数的基础知识和设计思路。并且封装成了一个 hook vue-use-sync-url，欢迎在你的项目中直接使用。