vue3 路由判断是前进还是后退

biao昵称

已于 2023-07-03 14:17:32 修改

阅读量1.9k

点赞数

文章标签： vue.js 前端 javascript

于 2023-07-03 14:07:15 首次发布

本文链接：https://blog.csdn.net/u014433707/article/details/131514432

版权

文章介绍了如何使用window.history.state记录路由历史，以此判断前进或后退，并结合Vue的keep-alive组件管理页面缓存。同时，通过修改state更新过渡动画，实现不同方向的导航效果。

摘要由CSDN通过智能技术生成

利用window.history.state.position记录当前的路由的历史数量，这种方法比较简单。在网上查阅了很多资料，写的比较复杂。
浏览器在当前URL下给出的一个状态信息。如果没有使用history.pushState，history.replaceState触动过时，为默认值null.
router-view

<router-view v-slot="{ Component, route }">
  <transition :name="store.transitionName">
    <keep-alive :include="store.keepAliveRouters">
      <component :is="Component" :key="route.path" />
    </keep-alive>
  </transition>
</router-view>

router.js

let position = 0
router.beforeEach((to, from) => {
  const isBack = position > window.history.state.position;

  // 路由前进加入缓存，后退删除缓存\
  !isBack ? store.addKeepAlive(to.name) : store.removeKeepAlive(from.name);


  // 路由过度动画
  !isBack ? store.setTransitionName('slide-left') : store.setTransitionName('slide-right')
});

router.afterEach((to, from)=> {
  position = window.history.state?.position || 0
})

附：路由跳转动画

.slide-left-enter-active,
.slide-left-leave-active,
.slide-right-enter-active,
.slide-right-leave-active {
  transition: all 300ms ease;
  z-index: 999;
}
.slide-left-enter-from,
.slide-right-leave-to {
  opacity: 1;
  transform: translateX(100vw);
}
.slide-left-leave-to,
.slide-right-enter-from {
  transform: translateX(-60vw);
  opacity: 0;
}