vueページ切り替えプロジェクトによる動画の切り替え方法

前言
モバイル端末は、Vueを使ってユーザー体験をよくするために、APP形式の切り替えページの左滑りと右滑りの効果を実現する必要があります。
原理を実現して、vueの移行&アニメーション
技術スタック：vue+vue-router
考えをまとめる
前進と後退のルートを区別する
インターネットで検索した資料は、二つの種類があります。
事件を傍受する

window.addEventListener('popstate', function (e) {
  //          ,              
  router.isBack = true
},false)

ルーティングを登録する際には、metaオブジェクト（ルーティング元情報）にインデックスを追加します。このようにするとインデックスのサイズに注意が必要です。

{
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "  ",
    keepAlive: false,
    index: 1
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "  ",
    keepAlive: true,
    index: 2
   }
  },

切り替え方向によって異なるアニメーション効果を設定します。
シナリオ
ルート登録

 {
   path: "/login",
   component: resolve => require(["@/pages/login"], resolve),
   meta: {
    title: "  ",
    keepAlive: false, //         ,        ,       name    name     
    index: 1, //          ,               
   }
  },
  {
   path: "/forward",
   name: "Forward",
   component: resolve => require(["@/pages/forward"], resolve),
   meta: {
    title: "  ",
    keepAlive: true,
    index: 2
   }
  },

アプリ.vueでは、アニメーションの方向を判断します。

<template>
 <div id="project">
   <!-- 
   <keep-alive>
       <router-view v-if="$route.meta.keepAlive"></router-view>
   </keep-alive>
   <router-view v-if="!$route.meta.keepAlive"></router-view>
        , 
   :include:       transition    keep-alive, vue     
           transition    keep-alive,   transition   name    
 --> 
  <transition :name="transitionName">
   <keep-alive :include="cachedViews">
    <router-view :key="1"></router-view>
   </keep-alive>
  </transition>
 </div>
</template>

<script>
export default {
 name: "App",
 data() {
  return {
   transitionName: "slide-right", //         
   cachedViews: [] //     
  };
 },
 components: {},
 created() {},
 watch: {
  $route(to, from) {
   if (to.meta.keepAlive && !this.cachedViews.includes(to.name)) {
    //           ,      ,   to.name          name    
    this.cachedViews.push(to.name);
   }
   //  to    from  ,       ,        
   if (to.meta.index > from.meta.index) {
    //      
    this.transitionName = "slide-left";
   } else {
    this.transitionName = "slide-right";
   }
  }
 },
 methods: {}
};
</script>


<style lang="scss" scoped>
.slide-right-enter-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-left-leave-active {
 will-change: transform;
 transition: all 0.5s;
 <!-- 
        ,            ,     ,               
                       ,                100vw
 -->
 width: 100vw;
 position: absolute;
}
.slide-right-enter {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
.slide-right-leave-active {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-enter {
 opacity: 0;
 transform: translate3d(100%, 0, 0);
}
.slide-left-leave-active {
 opacity: 0;
 transform: translate3d(-100%, 0, 0);
}
</style>

問題の解決を待つ

サブルーティング問題

サブルートはまだ考慮されていません。

キャッシュコンポーネント問題

上記の方法を使うと、キャッシュコンポーネントはコンポーネントのnameオプションとルートのnameオプションが一致していることに注意してください。コンポーネントのnameオプションを記入することをうっかりしてしまいます。
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。