使用方法只需要跟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. BZOJ2434:[NOI2011]阿狸的打字机(AC自动机,线段树)

    Description 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母. 经阿狸研究发现,这个打字机是这样工作的 ...

  2. CUDA与OpenGL互操作实例

    本文要解决的问题是如何实现CUDA和OpenGL的互操作,使得GPU能够将通用计算的运算结果交给OpenGL进行绘制. 本文的应用程序主要包括两个方面: 1.      使用CUDA核函数生成图像数据 ...

  3. 让NSArray数组中每个对象都调用的方法

    1. [array valueForKey:@"title"]; //Returns an array containing the results of invoking val ...

  4. angularjs ng-app="angular_app" ng-controller="angular_controller" ng-init="findAll()"

    ng-app="angular_app" 范围 ng-controller="angular_controller" 控制器 ng-init="fin ...

  5. Deferred Lighting

    Deferred lighting separate lighting from rendering and make lighting a completely image-space techni ...

  6. 工具 | Axure基础操作 No.1

    Axure作为一款热门的原型设计工具,是产品汪必备的一个技能.对于我个人来说,虽然更加喜欢墨刀这种小清新并且易用的网页版轻量级工具. 我在这里进行一些简单操作的动图,方便和我一样刚入门的同学容易看得明 ...

  7. js中哪些值会被认为false?

    在javascript中,只有 false null undefined 空字符串 即 “” 数字  0 数字 NaN 会被当作false,其余都是真. 注:字符串 “false” 也会被当作真.

  8. VMware Workstation 安装Vmware tools 是 出现vmware tools unavailable

    这个问题是因为虚拟机安装的时候操作系统选择的不对,在Virtual Machine Settings中选择Options,在General中选择正确的操作系统类型 例如Guest operating ...

  9. 深入理解bit_or和bit_and,bit_count

    bit_or:二进制数按位或,bit_and:二进制数按位与,bit_count:统计二进制数1个个数 下面以一个例子来说明用法:示例要实现的功能就是计算每月有几天有访问,先把示例摘录在这里.1234 ...

  10. (Linux学习笔记一:压缩)[20180209]

    学习笔记一:压缩 2015年2月5日 上午 10:23 压缩命令 压缩文件的扩展名大多是*.tar.*.tar.gz.*.tgz.*.gz.*.Z.*.bz2 常见的压缩命令gzip与bzip2,其中 ...