解决vue页面刷新或者后退参数丢失的问题

在toB的项目中，会经常遇到列表数据筛选查询的情景，当要打开某一项的详情页或者暂时离开列表页，再返回（后退时），选择的筛选条件会全部丢失，辛辛苦苦选择好的条件全没了，还得重新选择，如果有分页的更头大，还得重新一页页翻到之前看到的那一页，用户体验极度不友好。 我的解决有两种： 第一种方法：用vue 的<keep>，即在<router>外套一层<keep>。 虽然可以达到一定效果，但是控制起来比较麻烦，比如项目中并不是所有页面都需要缓存，代码写起来复杂 第二种方法：直接用localStorage，简单粗暴（推荐） 代码如下： list.vue export de 在Vue.js应用中，用户交互过程中常常涉及到页面的跳转和刷新，这可能导致用户在页面之间切换时丢失一些关键的数据，比如筛选条件、分页信息等。这种情况在面向企业级应用（toB）的列表数据筛选查询场景中尤为常见。为了解决这个问题，通常有以下两种方法： 1. 使用Vue的`<keep-alive>`组件： `<keep-alive>`是Vue提供的一种内置组件，它的主要功能是将组件的状态进行缓存，当再次进入该组件时，能够恢复之前的状态。在路由配置中，可以在`<router-view>`外面包裹一层`<keep-alive>`，这样被包含的组件的实例就会被缓存，而不是销毁。然而，这种方法并不总是适用，因为并非所有页面都需要被缓存，而且管理哪些页面需要缓存可能会使代码变得复杂。 2. 利用`localStorage`存储参数： `localStorage`是一种浏览器提供的Web Storage技术，它可以将数据持久化地存储在用户的浏览器上，即使页面被关闭或刷新，数据依然存在。在Vue应用中，我们可以在路由离开前将筛选条件存储到`localStorage`，然后在路由进入时检查`localStorage`中的数据，如果有，则恢复这些条件。例如，在`list.vue`组件中： ```javascript export default { data() { return { searchForm: { project_name: '', status: '', city: '', round: '', fund: '', charge: '', page: 1, }, }; }, beforeRouteLeave(to, from, next) { // 在跳转到详情页或任意其他界面之前，保存筛选条件到localStorage if (to.name === 'Detail') { let condition = JSON.stringify(this.searchForm); localStorage.setItem('condition', condition); } else { // 如果离开列表页且不是跳转到详情页，清除条件，也可以选择不清除 localStorage.removeItem('condition'); } next(); }, created() { // 从localStorage中读取条件并赋值给查询表单 let condition = localStorage.getItem('condition'); if (condition !== null) { this.searchForm = JSON.parse(condition); } // 发送HTTP请求获取数据，这里以示例API为例 this.$http.get('http://example.com/api/test', { params: this.searchForm }).then((response) => { console.log(response.data); }).catch((error) => { console.log(error); }); }, }; ``` 这种方法虽然简单易行，但也有其局限性。`localStorage`的存储空间有限（通常为5MB），且数据无法跨域共享。另外，如果需要更复杂的会话管理或者更安全的数据存储，可以考虑使用`sessionStorage`或者服务器端的会话存储。对于需要跨浏览器窗口共享数据的情况，可以考虑使用`IndexedDB`。同时，使用`cookie`也是另一种选择，它可以设置过期时间，并且可以通过HTTP头进行传输，适合存储一些较小的、与服务器通信相关的数据。 解决Vue页面刷新或后退时参数丢失的问题，可以根据实际需求选择合适的方法。`<keep-alive>`适用于需要缓存整个组件状态的情况，而`localStorage`或`sessionStorage`则更适合用于存储用户操作数据，如筛选条件、分页信息等。在选择方案时，需要综合考虑数据类型、存储需求以及用户体验等因素。