vue-router遷移アニメーションで左右スライドを実現

フック関数を使用:beforeRouteUpdate.原理:1つのページには2次ナビゲーションがあり、2次ナビゲーションを切り替えると、対応する内容が変化します.このページは多重化されていて、一度しか生成されず、二次ナビゲーションを切り替えたとき、ナビゲーションが更新されていることをどのように知っていますか?1ページに2次ナビゲーションがある場合、2次ナビゲーションをクリックするとナビゲーションパスが更新され、ルーティングフック関数beforeRouteUpdateがトリガーされます.
コードの例
1.nameは定義された遷移アニメーションの名前です

  <keep-alive>
      <transition :name="transitionName">
        <router-view/>
      </transition>
    </keep-alive>

2.mountedでコンポーネントルーティングフック関数beforeRouteUpdateを定義します.

  beforeRouteUpdate(to, from, next) {
     
    const tp = to.path;
    const fp = from.path;
 
    let leftPaths = [
      `fp === "/edit" && tp === "/edit/rename"`,
      `fp === "/edit" && tp === "/edit/interest"`
    ];
    let rightPaths = [
      `fp === "/edit/rename" && tp === "/edit"`,
      `fp === "/edit/interest" && tp === "/edit"`
    ];
 
    this.leftSlide(leftPaths, fp, tp);
    this.rightSlide(rightPaths, fp, tp);
 
    setTimeout(() => {
     
      next()
    }, 50)
  },

3.methodsで定義された方法:

 leftSlide(paths, fp, tp) {
     
      paths.forEach(path => {
     
        if (eval(path)) {
     
          this.transitionName = 'slide-left';
        }
      })
    },
    rightSlide(paths, fp, tp) {
     
      paths.forEach(path => {
     
        if (eval(path)) {
     
          this.transitionName = 'slide-right';
        }
      })
    },

4.グローバルclassクラスを定義するには:

.slide-left-enter {
     
  transform: translateX(100%);
}
.slide-left-enter-active{
     
  transition: transform .3s;
}
.slide-left-enter-to{
     
  transform: translateX(0);
}
.slide-left-leave {
     
  transform: translateX(0);
}
.slide-left-leave-active {
     
  transition: transform .3s
}
.slide-left-leave-to {
     
  transform: translateX(0);
}
 
.slide-right-enter {
     
  transform: translateX(0);
}
.slide-right-enter-active{
     
  transition: transform .3s;
}
.slide-right-enter-to{
     
  transform: translateX(0);
}
.slide-right-leave {
     
  transform: translateX(0);
}
.slide-right-leave-active {
     
  transition: transform .3s;
}
.slide-right-leave-to {
     
  transform: translateX(100%);
}