使用方法只需要跟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. BZOJ3238:[AHOI2013]差异(SAM)

    Description Input 一行,一个字符串S Output 一行,一个整数,表示所求值 Sample Input cacao Sample Output 54 HINT 2<=N< ...

  2. php无极限分类函数

    /** * [make_tree description] * @Author Lerko * @DateTime 2017-04-01T14:57:24+0800 * @param [type] $ ...

  3. Spring(十八)之页面重定向

    首先说明,该示例的maven依赖可以复用Spring(十七)之表单处理还有 还有就是对应的web.xml和servlet.xml文件都能复用,不必再次修改. 说到重定向不得不提到一个转发.这里概述一下 ...

  4. Gradle Goodness: Unpacking an Archive

    To create an archive with Gradle is easy. We have several tasks like Zip, Tar, Jar, War and Ear to c ...

  5. iOS:CALayer(17-12-06更)

    目录 1.CALayer(父类) 2.CAShapeLayer(形状/画布) 3.CAEmitterLayer(粒子发射层) 4.CAGradientLayer(渐变层) 5.CATransformL ...

  6. python人工智能爬虫系列:怎么查看python版本_电脑计算机编程入门教程自学

    首发于:python人工智能爬虫系列:怎么查看python版本_电脑计算机编程入门教程自学 http://jianma123.com/viewthread.aardio?threadid=431 本文 ...

  7. Linux下安装 Redis

    一.部署前准备 1.首先上官网下载Redis 最新稳定的压缩包 2.通过远程管理工具,将压缩包拷贝到Linux服务器中,执行解压操作 [root@CentOS6 ~]# tar zxvf redis- ...

  8. linux系统基础之-----磁盘结构(基于centos7.4 1708)

  9. 编译升级至openssh7.6

    1.概述 目的:下载源码包(https://openbsd.hk/pub/OpenBSD/OpenSSH/portable/openssh-7.6p1.tar.gz),编译升级为openssh为7.6 ...

  10. wso2 ei 6.4.0安装笔记

    目的:将最新版(6.4.0)部署在linux服务器,与Api Manager部署在同一环境 环境: Centos 7.3 Jdk 8 Mysql 5.7 问题一: 将H2替换为Mysql5.7数据库时 ...