关于vue.js:Vue页面前进刷新后退缓存动画解决方案vcathistory轻量级插件

反对 vue3
反对 TypeScript
后退后退动画
后退刷新后退缓存
无代码净化

插件装置

# 目前仅反对 vue3 我的项目
npm i vcat-history

APP 我的项目中页面的后退后退是最根本的性能，那么在 Vue 我的项目中如何实现？

动画
实现的形式大多数都是通过监听 popstate 事件和 router 来判断页面后退或后退，配合 transition 实现动画成果。
这是我在最后开发中实现的形式，不过在理论我的项目中体验并不完满，偶然会有 bug，尽管不影响应用。

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

<keep-alive>
  <router-view>
    <!-- 被缓存的视图 -->
  </router-view>
</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
})

<!-- App.vue -->
<template>
  <router-view v-slot="{Component}">
    <transition :name="transitionName">
      <keep-alive :exclude="excludePages">
        <component :is="Component" :key="$route.fullPath" />
      </keep-alive>
    </transition>
  </router-view>
</template>

<script lang="ts">
import {defineComponent, computed} from "vue";
import {state} from "vcat-history";

export default defineComponent({
  name: "App",
  setup() {const transitionName = computed(() => state.transitionName);
    const excludePages = computed(() => state.excludePages);
    return {
      transitionName,
      excludePages,
    };
  },
});
</script>
<!-- 默认动画款式，.slide-left 后退，.slide-right 后退 -->

如果感觉好用，请举荐给别人！有问题请留言，感激反对！
Demo 链接

vcat-history

问题形容

应用