前言

移動端, 使用vue為了良好的用戶體驗, 會需要實現APP形式的切換頁面的左滑和右滑效果

實現原理, vue的過渡 & 動畫

技術棧: vue + vue-router

解決思路

• 區分前進 和 后退的路由

  網上搜索的資料, 找到了兩種

  • 監聽popstate事件

    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
          }
        },
    

• 根據切換方向設置不同的動畫效果(通過給transtion內置組件不同的name選項)

方案

1. 路由注冊

    {
         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
         }
       },
   

2. 在App.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選項問題