使用方法只需要跟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. php无极限分类函数

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

  2. 【洛谷P1373】小a和uim之大逃离

    小a和uim之大逃离 题目链接 因为每次只能向下或向右走,我们可以递推 dp[i][j][d][0/1]表示走到(i,j),mod k 意义下差值为d,轮到小a/小uim操作时的方案数 dp[i][j ...

  3. 【poj Roads in the North】 题解

    题目链接:http://poj.org/problem?id=2631 求树的直径模板. 定理: 树上任意一个点的在树上的最长路一定以树的直径的两端点其中一点结束. 做法: 两边bfs,第一次先找到n ...

  4. ARP, Fragmentation and Reassembly

    Address Resolution Protocol IP addresses are said to be logical, because they are defined in terms o ...

  5. labview

    1.labview适用于测试测量领域,用于快速构建PC端上位机程序 2.例子: 我的电气参数测试仪. 上位机软件比想象的做的快了十几天... 学校的创新基金可以交差了,界面还是个人比较满意了.. 上图 ...

  6. Vertical-Align你应该知道的一切

    好,我们聊聊vertical-align.这个属性主要目的用于将相邻的文本与元素对齐.而实际上,verticle-algin可以在不同上下文中灵活地对齐元素,以及进行细粒度的控制,不必知道元素的大小. ...

  7. ARM对异常的处理

    所谓中断就是中断SoC的CPU核(异常可以引起CPU的中断) ARM对异常的处理 1.初始化: 1)设置中断源让它可以产生中断.如某个按键可以产生中断,那么可以设置它的GPIO引脚为中断引脚: 2)设 ...

  8. Centos7.5 lnmp+mongodb扩展

    安装NginxYUM源中没有Nginx,我们需要增加一个nginx的源nginx.repo # vi /etc/yum.repos.d/nginx.repo 源文件的内容 [nginx] name=n ...

  9. python中for......else......的使用

    for x in range(5): if x == 2: print(x) # break else: print("执行else....") 上述代码:当缺少break关键字时 ...

  10. Python学习 :装饰器

    装饰器(函数) 装饰器作为一个函数,可以为其他函数在不修改原函数代码的前提下添加新的功能 装饰器的返回值是一个函数对象.它经常用于有切面需求的场景,比如:插入日志.性能测试.事务处理.缓存.权限校验等 ...