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将父组件的数据传递给子组件,但是有个问题,子组件一般不 ...
随机推荐
- 2.spring:集合属性
1.list 配置java.util.List类型的属性,需要指定<list>标签,在标签里面包含有一些元素,这些标签 可以通过<value>指定简单的常量值,通过<r ...
- oracle 导出空表问题
select 'alter table '||table_name||' allocate extent;' from user_tables where num_rows=0
- PAT——1064. 朋友数(set用法)
如果两个整数各位数字的和是一样的,则被称为是“朋友数”,而那个公共的和就是它们的“朋友证号”.例如123和51就是朋友数,因为1+2+3 = 5+1 = 6,而6就是它们的朋友证号.给定一些整数,要求 ...
- 关于readonly的一些说明
readonly在代码中只能在字段初始化器和构造函数中赋值,并不是说readonly只能赋值一次,超出这个范围以后readonly就不能通过代码修改了,但是还是可以用反射来修改,readonly仅仅是 ...
- POJ 1753 Flip Game (状态压缩 bfs+位运算)
Flip game is played on a rectangular 4x4 field with two-sided pieces placed on each of its 16 square ...
- enmu枚举类型
在实际问题中,有些变量的取值被限定在一个有限的范围内.例如,一个星期内只有七天,一年只有十二个月,一个班每周有六门课程等等.如果把这些量说明为整型,字符型或其它类型显然是不妥当的.为此,C语言提供了一 ...
- Java 编码规范(转)
本文转自:http://www.javaranger.com/archives/390 文章总结出了java编码过程中的一些规范,以便参考. 1.合理组织代码层次,分层清晰:controller.lo ...
- win7下添加库文件出现“file is not regcognized”问题
最近几天需要画电路图,所以安装了protel se99,安装后在添加库文件的时候出现“file is not regcognized”的问题 百度查了一下,说win7基本上都会出现这个问题. 实际上, ...
- .net 网站中如何动态播放音乐,页面如何播放音乐
向别人请教有好处也有坏处,好处是你可以相对比较快的知道要点,坏处就是你TM的发现你弄了那么久都是白弄. 昨天今天一直在找一个问题的解决方案,我的问题描述大概是这样子的:我用vs2012开发的.net网 ...
- 微信小程序获取手机信息
wx.getSystemInfo({ success: function (res) { console.log(res.model)//手机型号 console.log(res.pixelRatio ...