先上gif:这里演示顺序是1232121

1.router.js中配置入口路由

{
    path: '/',
    redirect: '/index'
  }
2.main.js中new vue()之上:
window.addEventListener('popstate',function(e){
  router.isBack = true
},false)

3.app.vue中配置公共滑动动画

<div id="app">
    <transition :name="transitionName">
      <router-view></router-view>  
    </transition>
 </div>
并监听路由判定是前进还是后退给予不同的动画名称
watch:{
    $route(to,from){
      let isBack = this.$router.isBack
      if(this.$router.isBack){
        this.transitionName = 'slide-right'
      }else{
        this.transitionName = 'slide-left'
      }
      this.$router.isBack = false
    }
  },
以及公共的css
.slide-left-enter, .slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%)
}
.slide-left-leave-to, .slide-right-enter {
  opacity: 0;
  transform: translateX(-100%)
}
.slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active {
  transition: .5s;
  position: absolute;
  top:0;
}
这样效果已经实现,这里说一些遇到的坑和解决方法:
1.前进或是后退动画方向不对,这里我是将router.js中的mode值从history路由改为hash路由

2.最后一个页面的返回动画方向未改变,常见的下一个页面的hearder页面的返回通常用组件写的,需要手动改掉返回路径@click="$router.back(-1)"

vue-router设置页面切换滑动效果的方法及解决遇到的坑的更多相关文章

  1. react实现页面切换动画效果

    一.前情概要 注:(我使用的路由是react-router4)     如下图所示,我们需要在页面切换时有一个过渡效果,这样就不会使页面切换显得生硬,用户体验大大提升:     but the 问题是 ...

  2. C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西,也许你那块就用的到

    C# PDF Page操作——设置页面切换按钮   概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...

  3. React Router v4 页面传值的三种方法

    传值方法 1.props.params 使用React router定义路由时,我们可以给指定一个path,然后指定通配符可以携带参数到指定的path: <Route path='/user/: ...

  4. 在IDEA中设置页面背景护眼色的方法

    在IDEA中设置页面背景护眼色的方法如下:

  5. vue transition实现页面切换效果

    我们都知道vue可以做成单页应用 点击的时候就能切换  如果我们要添加一些视觉效果 比如页面切换的时候有一个缓冲效果 这个时候就需要用到vue里的transition这个标签 在使用这个标签之前需要了 ...

  6. C# PDF Page操作——设置页面切换按钮

    概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者最后一页,另一种是设置按钮跳转到指定页面.两种方法适 ...

  7. Axure8 实现移动端页面上下滑动效果

    目前,很多Axure新人都在问如何实现界面上下滑动效果,网上相关的教程也不少,各有各的方法,但是很少有教程对滑动界限设置做出比较详细的说明,其实在工作过程中,个人发现练好Axure是很有意提升逼格的, ...

  8. Windows Phone使用sliverlight toolkit实现页面切换动画效果

    使用应用时,好多app在页面切换的时候都有一个动画效果,感觉很炫,也大大增加了用户体验,怎么实现呢? 界面的切换,可以用Windows Phone Toolkit中的TransitionService ...

  9. vue中使用better-scroll实现滑动效果

    1.安装:npm install better-scroll 2.引入:import BetterScrol from "better-scroll"; 1.滚动效果 better ...

  10. vue router 跳转到新的窗口方法

    在CreateSendView2.vue 组件中的方法定义点击事件,vue router 跳转新的窗口通过采用如下的方法可以实现传递参数跳转相应的页面goEditor: function (index ...

随机推荐

  1. 开发必会系列:《Java多线程编程实战》读书笔记

    如何判断是否开启超线程 一  基础 进程是程序向操作系统申请资源(如内存空间和文件句柄)的基本单位.线程是进程中可独立执行的最小单位. 在Java平台中创建一个线程就是创建一个Thread类(或其子类 ...

  2. quartus之LPM_COMPARE测试

    quartus之LPM_COMPARE测试 1.IP描述 比较器的IP,可以比较两路数据是否相等.相等输出为1,不等输出为0的aeb信号是需要测试的量. 2.基础测试 module compare_t ...

  3. 数据库操作入门:PyMongo 和 MongoDB 的基本用法

    MongoDB MongoDB是一种流行的NoSQL数据库,它将数据存储在类似JSON的文档中,使数据库非常灵活和可扩展 PyMongo Python需要一个MongoDB驱动程序来访问MongoDB ...

  4. 拥抱开源更省钱「GitHub 热点速览」

    免费.低成本.自托管.开源替代品...这些词就是本周的热门开源项目的关键字.常见的 AI 提升图片分辨率的工具,大多是在线服务或者调用接口的客户端,而「Upscaler」是一款下载即用的免费 AI 图 ...

  5. Spring源码 19 IOC getBean方法

    前面实现了 ClassPathXmlApplicationContext 的构造,接下来分析其调用的 getBean 方法. 以 getBean(UserDao.class) 为例. 1 Abstra ...

  6. HMS Core机器学习服务,高效助力跨语种沟通

    5月24日, HUAWEI Developer Day(简称HDD)线上沙龙·创新开发专场活动成功举办.HMS Core机器学习服务(ML Kit)产品经理在会上围绕机器翻译的技术优势.使用场景和接入 ...

  7. Android与STM32通信中巧妙解决中文乱码问题

    前言 网上一大堆都是要多种格式相互转换,并且要很大的字库文件,对于小应用工程,小容量的STM32芯片,额外多出这些开销会感到蛮不舒服的,而且绝大部分的乱码问题时发生在STM32这边,所以本文是从And ...

  8. 基于istio实现多集群流量治理

    本文分享自华为云社区<基于istio实现多集群流量治理>,作者: 可以交个朋友. 一 背景 对多云.混合云等异构基础设施的服务治理是Istio重点支持的场景之一.为了提高服务的可用性,避免 ...

  9. 有奖活动 | 以代码之名,写出对Ta的爱

      七夕情人节到了,为了Ta, 你打算用什么方式表达爱? 是包包.鲜花.美酒.巧克力, 还是一封充满爱意的短信? 在HarmonyOS,有一群精致又机智的开发者们,他们#以代码之名,表达爱# 比起鲜花 ...

  10. 重新点亮linux 命令树————网络管理[十一二]

    前言 简单整理一下网络管理. 正文 网络管理需要掌握: 网络状态查看 网络配置 路由命令 网络故障排除 网络服务管理 常用网络配置文件 网络状态的查看: 1.net-tools ---->1.i ...