前端 Vue路由返回恢复页面状态的实现方案

需求场景

首页搜索内容，点击跳转至详情页，页面后退返回主页，保留搜索结果。

方案：

路由参数；路由守卫

需求描述

在使用 vue 开发前端的时候遇到一个场景：在首页进行一些数据搜索，点击搜索结果进入详情页面，浏览详情页后返回主页。但这时候之前的搜索记录和翻页就消失了，用户体验不好。所以需要在返回后恢复跳转前的页面参数状态。

当然如果条件允许，最简单的办法是点击搜索结果使用新页面打开（例如百度那样）。

但当前需求是一个完整的vue开发的项目，并不是打开站外地址，而且详情的内容也不多，使用新页面不太合适（性能较差而且容易制造巨量标签页）。

这里介绍两种比较容易实现的解决方案：

• 方案一：将搜索参数存储在路由参数（route.query）中，加载页面时根据参数搜索

优点：刷新不影响；实现简单
缺点：参数只能是基础类型、长度受限；路径看起来比较难看；只对浏览器返回有效，手动跳转回首页不行

• 方案二：使用路由守卫钩子，在离开页面前本地存储页面参数（vuex、Local Storage 等等）

优点：参数类型长度都比较自由；路径看起来清爽美观；对任意方式返回主页都有效
缺点：需要额外进行数据存储操作，如果使用store模式或vuex则刷新页面失效