使用方法只需要跟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. vue - 数据驱动,组件化, 双向绑定原理

    1.数据驱动 传统的前端数据交互是用Ajax从服务端获取数据,然后操作DOM来改变视图: Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它让 ...

  2. Linux学习总结(十)-文件复制及查看, 环境变量

    一 文件复制及移动 1.命令 cp --------copy 的意思格式 cp 选项 源文件 目标文件a: 对于文件我们直接cp 文件 目标文件假定我们在普通用户家目录下/home/lv新建两个普通文 ...

  3. iview(DatePicker)时间转入后台少一天 解决方案

    后台注解 前台: 加个事件 @on-change @on-change="getStartTime" getStartTime(starTime) { this.leaveReco ...

  4. iOS中的应用启动原理

    iOS中的应用启动原理 来源: http://m.blog.csdn.net/article/details?id=50530090 http://m.warting.com/program/2016 ...

  5. Linux -- 用户组篇

    Linux -- 用户与用户组 1.Linux 系统中有三种角色:所有者(用户),用户组与其他人,一张图可以说明用户与用户组的关系. 如图,某公司相当于一个用户组,该用户组下有A,B两个用户,用户拥有 ...

  6. CoacoaPods安装使与使用超级详细教程

    对于一个iOS开发的初学者来说,并不知道第三方类库的存在,知道了也不知道如何使用,那么下面便来介绍一下使用方法. iOS开发常用的第三方类库是GitHub:https://github.com/ 在上 ...

  7. Java九阳真经论述及愿景

    Java九阳真经论述及愿景 “他强由他强,清风拂山冈,他横由他横,明月照大江.” <倚天屠龙记>中张无忌被玄冥二老的玄冥神掌打伤后,体寒难耐,到处求解决之法.一次被韦蝠王打下山谷后,偶遇一 ...

  8. chromium之observer_list

    典型用法如下 /////////////////////////////////////////////////////////////////////////////// // // OVERVIE ...

  9. jQuery实现简单的拼图游戏

    一,实现拼图的搭建: <div class="box"> <table id="table1" class="mytable&quo ...

  10. md5加密+盐方式二

    这类md5+盐加密是属于自定义盐值的简单方法! 1.导入架包 2.调用方法 DigestUtils.md5Hex(password);//加密方法 举例 方式一: password=DigestUti ...