使用方法只需要跟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. STL - next_permutation 全排列函数

    学习: http://blog.sina.com.cn/s/blog_9f7ea4390101101u.html http://blog.csdn.net/ac_gibson/article/deta ...

  2. spring mvc(4)处理模型数据

    处理模型数据 Spring MVC 提供了以下几种途径输出模型数据: – ModelAndView: 处理方法返回值类型为 ModelAndView时, 方法体即可通过该对象添加 模型数据 – Map ...

  3. Windows环境下ELK简单搭建记录

    前言 ELK已经是一套成熟的日志解决方案,虽然出现了好久,今日才终于研究了一下,不过是在windows平台上安装的. 搭建步骤 下载软件 安装软件 修改配置文件 启动软件 集成测试 下载软件 首先从官 ...

  4. sqoop 1.99.7 安装及配置

    一  下载sqoop 1.99.7 http://mirror.bit.edu.cn/apache/sqoop/1.99.7/ 二 解压安装文件 三 配置Sqoop 环境变量 最后把mysql的驱动j ...

  5. Elementui 导航组件和Vuejs路由结合

    Elementui 导航组件和Vuejs路由结合, 达到点击导航切换路由,根据路由定位导航 一下是nav.vue代码,导航数据以json格式配置 <template> <el-men ...

  6. sysbench安装

    sysbench安装 1.下载软件mkdir -p /usr/local/softwarecd /usr/local/softwaregit clone https://github.com/akop ...

  7. 在控制台中操作MYSQL数据库步骤以及一些小问题

    一直用Navicat来对MySQL数据库进行操作,今天突然想试试用DOS控制台来操作,特记录自己第一次使用经历,若有错误之处,还望大佬们指点. 首先打开控制台,win+R键,输入cmd,确定 输入my ...

  8. js 中~~是什么意思?

    其实是一种利用符号进行的类型转换,转换成数字类型 ~~true == 1~~false == 0~~"" == 0~~[] == 0 ~~undefined ==0~~!undef ...

  9. h5开发中所遇到的兼容性及所遇到的常见问题

    1. 移动端border1px问题 <script> var viewport = document.querySelector("meta[name=viewport]&quo ...

  10. Java实例 Part1:Java基础输出语句

    ** Part1:Java基础输出语句 ** 第一部分最基础,就是标准的输出语句. ps:(目前还没熟悉这个编辑器,先尝试一下) Example01 : 输出"hello world&quo ...