Vue页面前进刷新后退缓存(动画)解决方案，vcat-history轻量级插件

vcat-history

• 支持vue3
• 支持TypeScript
• 前进后退动画
• 前进刷新后退缓存
• 无代码污染

插件安装

# 目前仅支持vue3项目
npm i vcat-history

问题描述

APP项目中页面的前进后退是最基本的功能，那么在Vue项目中如何实现？

动画
实现的方式大多数都是通过监听 popstate 事件和 router 来判断页面前进或后退，配合 transition 实现动画效果。
这是我在最初开发中实现的方式，不过在实际项目中体验并不完美，偶尔会有bug，虽然不影响使用。

缓存
为了让用户有最佳的体验，在用户打开新页面的时候，新页面上的数据是最新的(刷新)，而当用户后退到上个页面的时候，上个页面需要恢复到之前的状态(包括数据和滚动条的位置)，这其中就需要用到 keep-alive 来对页面进行缓存。

解决
在最新的方案中，我的想法是使用vuex来管理路由的历史状态，由于页面是按照一定顺序打开的，例如 A > B > C 这样的顺序打开页面，那就按照顺序添加到历史状态中 [A, B, C] ，在每次插入记录之前都会检查列表中是否存在相同的记录，如果下个页面打开的是D，因为D不存在，所以列表是 [A, B, C, D] ，说明页面是前进的，如果下个页面打开的是B，因为B存在，所以是后退操作，最后列表更新 [A, B] 。

按照这样的逻辑，前进的页面都进行 keep-alive ，后退的页面放入一个 exclude 列表中，这样就实现了前进后退动画，前进刷新后退缓存的效果。

使用

// 在 router 中引用
import { initRouter } from "vcat-history";

// 替换原理的 createRouter
const router = initRouter({
    history: createWebHashHistory(),
    routes
})

如果觉得好用，请推荐给他人！有问题请留言，感谢支持！
Demo链接