vcat-history支持vue3支持TypeScript前进后退动画前进刷新后退缓存无代码污染插件安装#目前只支持vue3项目npmivcat-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，而后退的页面则放入一个excludelist，从而实现前进后退动画，前向刷新，后退缓存的效果。使用//referenceimport{initRouter}from"vcat-history"inrouter;//createRouterconstrouter=initRouter({history:createWebHashHistory(),routes})演示链接
