NavRouter
使用方法只需要跟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的更多相关文章
- flutter最简单轻量便捷的路由管理方案NavRouter
大家好,我是CrazyQ1,今天给大家推荐一个路由管理方案,用的非常不错的,叫nav_router. 项目地址是:https://github.com/fluttercandies/nav_route ...
- 记一次vue+vuex+vue-router+axios+elementUI开发(三)
项目用到了状态管理工具 Vuex 中文文档:https://vuex.vuejs.org/zh/guide/ 大家都知道,vue中可用props将父组件的数据传递给子组件,但是有个问题,子组件一般不 ...
随机推荐
- JS解析json数据(如何将json字符串转化为数组)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD ...
- spring mvc(4)处理模型数据
处理模型数据 Spring MVC 提供了以下几种途径输出模型数据: – ModelAndView: 处理方法返回值类型为 ModelAndView时, 方法体即可通过该对象添加 模型数据 – Map ...
- JSON数据转换之net.sf.json包的使用
转载 解析json之net.sf.json https://blog.csdn.net/itlwc/article/details/38442667 一.介绍 使用之前需要导入的jar包: json- ...
- HDU 1028 Ignatius and the Princess III 整数的划分问题(打表或者记忆化搜索)
传送门: http://acm.hdu.edu.cn/showproblem.php?pid=1028 Ignatius and the Princess III Time Limit: 2000/1 ...
- OpenCV 中CV_IMAGE_ELEM 的使用
CV_IMAGE_ELEM 是一个宏函数,基本形式: CV_IMAGE_ELEM(image,elemtype,row,col) 其中,image为指针数组,elemtype为数据的存取类型,row为 ...
- ASP.NET 跨域请求之jQuery的ajax jsonp的使用解惑 (转载)
前天在项目中写的一个ajax jsonp的使用,出现了问题:可以成功获得请求结果,但没有执行success方法,直接执行了error方法提示错误——ajax jsonp之前并没有用过,对其的理解为跟普 ...
- 课时25.a标签基本使用(掌握)
什么是a标签? 我们打开百度或者淘宝网页,观察任何一个超链接都会发现它有如下特质: 有下划线 移上去有小手指 可以点击 a标签的作用:就是用于控制页面与页面之间跳转的 a标签的格式:<a hre ...
- ConfigurationManager.AppSettings方法
一 配置文件概述: 应用程序配置文件是标准的 XML 文件,XML 标记和属性是区分大小写的.它是可以按需要更改的,开发人员可以使用配置文件来更改设置,而不必重编译应用程序.配置文件的根节点是conf ...
- GPUImage源码解读之GPUImageFramebufferCache
简介 由于GPUImage添加滤镜可以形成一个FilterChain,因此,在渲染的过程中,可能会需要很多个FrameBuffer,但是正如上文所说,每生成一个FrameBuffer都需要占用一定的内 ...
- thinkphp5 部署到iis服务器url重写
thinkphp部署到iis服务器配置url重写的解决方法: 1.下载 url rewrite.下载地址:https://www.iis.net/downloads/microsoft/url-rew ...