共计 1409 个字符，预计需要花费 4 分钟才能阅读完成。
vcat-history
- 反对 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 链接
正文完
