vue项目 页面切换项目 转场动画

前言

移动端, 使用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(根组件)中, 判断动画方向

待解决问题

• 子路由问题

  子路由还没有考虑到

• 缓存组件问题

  使用上述方式, 缓存组件需要注意组件的name选项要和路由的name选项一致, 容易疏忽填写组件的name选项问题