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";// 替换原理的 createRouterconst 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链接