使用方法只需要跟vue-router一样正常使用即可,这里我们新加了一个路由跳转方法nav:

router.nav()//参数同router.replace一样。

路由跳转策略

首先说下路由跳转过程,不管是hash还是h5history模式在进行一系列跳转只有会保存路由堆栈,这样我们在点击浏览器的前进后退也可以进行页面的切换,如下:

routerA -> routerB -> routerC

问题

假如我们在routerB那么可以前进到routerC,或者退到routerA,在移动端我们一半可以使用右滑来后退,但是在iPhone可以左滑前进(前提是存在可前进的路由)。而这里遇到的问题是如果我们做一个左滑的功能的时候就很容易触发iPhone这个功能,当然有人说可以在路由跳转的时候使用replace这样就没有前进的路由了,但是我们总会有要后退的时候,比如商品列表到商品详情,因此我们还需要后退功能,这里我们对路由跳转做了劫持。

方案

路由前进使用我们自己方法nav, 每次记录跳转的路由,而后退的时候再把记录的路由取出来手动跳转即可。在跳转当然是每次都是replace,这样保持了路由堆栈只有一个记录,而我们自己记录的如果在后退过程中没有了,就按照原生的去跳转了。

源码地址:https://github.com/Stevenzwzhai/NavRouter

NavRouter的更多相关文章

  1. flutter最简单轻量便捷的路由管理方案NavRouter

    大家好,我是CrazyQ1,今天给大家推荐一个路由管理方案,用的非常不错的,叫nav_router. 项目地址是:https://github.com/fluttercandies/nav_route ...

  2. 记一次vue+vuex+vue-router+axios+elementUI开发(三)

    项目用到了状态管理工具 Vuex  中文文档:https://vuex.vuejs.org/zh/guide/ 大家都知道,vue中可用props将父组件的数据传递给子组件,但是有个问题,子组件一般不 ...

随机推荐

  1. CF587F Duff is Mad

    题目 有趣的思想 首先暴力的话,自然是对每一个询问在\(AC\)自动机上跑一遍\(k\),看看跑出来的节点在\(fail\)树到根的路径上有多少个\(l\)到\(r\)之间的结束标记就好了 我们发现无 ...

  2. Thread-Specific-Storage for C/C++

    引用出处:https://www.cse.wustl.edu/~schmidt/PDF/TSS-pattern.pdf 摘要: 理论上多线程会提高程序性能,但实际上,由于在获取和释放锁的开销,多线程经 ...

  3. Centos7 安装eclipse IDE for C++

    1.安装前eclipse需要java, yum -y install java 查看版本java -version 2.下载eclipse IDE http://www.eclipse.org/dow ...

  4. mysql 设置无密码登陆

    登入 MySQL 报错: C:\Users\dell>mysql -uroot -p Enter password: **** ERROR 1045 (28000): Access denied ...

  5. vue中图片返回404时,显示默认的图片

    图片返回404时候的处理 <img :src="userMsg.portrait" ref="img" alt=""> _thi ...

  6. AngularJS简介-起步阶段

    AngularJS 是一个为动态WEB应用设计的结构框架,提供给大家一种新的开发应用方式,这种方式可以让你扩展HTML的语法,以弥补在构建动态WEB应用时静态文本的不足,从而在web应用程序中使用HT ...

  7. Unity 游戏框架搭建 2018 (二) 单例的模板与最佳实践

    Unity 游戏框架搭建 2018 (二) 单例的模板与最佳实践 背景 很多开发者或者有经验的老手都会建议尽量不要用单例模式,这是有原因的. 单例模式是设计模式中最简单的也是大家通常最先接触的一种设计 ...

  8. HDU1398 Square Coins(生成函数)

    Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submission( ...

  9. Zabbix——使用邮件报警

    前提条件: 1. Zabbix版本4.0 zabbix-server 命令配置: yum install mailx -y #下载邮件功能 vi /etc/mail.rc set bsdcompat ...

  10. font(字体)所使用的属性

    1.font-weight:normal blod bolder lighter  100-900之间 400=normal p:first-child{ padding-top: 50px; pos ...